我如何使用ngTemplate和ngContainer制作Pratilk页面

Question

例如：

├── modal
│   ├── layer
│   └──── layer.component.html
│   └──── layer.component.ts
│   │
│   ├── warningModal
│   └──── warningModal.component.html
│   └──── warningModal.component.ts
└

我的目标是创建带有层的模态结构。使用此模式仅是创建警告模式的内部。

layel.component.html

<ng-container *ngTemplateOutlet="control"></ng-container>

warningModal.component.ts

<ng-template #control>
  <p>hello guys</p>
</ng-template>

为什么不起作用？如果我将其写在单个文件中，它将起作用。但是，当您编写不同的组件时，它不起作用。我该怎么办？

Answer 1

1）当您同时在同一行中写了两个内容时，ngTemplateOutlet所需的模板就在同一位置，因此可以使用

2）当它们在两个不同的组件中时，彼此之间没有任何关系，因此，当传递ngTemplateOutlet="options"时，它只是将其假定为字符串而不是模板引用变量，因此不会显示任何内容

使用此方法

warningModal.component.html│

<app-layer [temp]="control"></app-layer>
<ng-template #control>
  <p>hello guys</p>
</ng-template>

layer.component.ts

import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-layer',
  templateUrl: './layer.component.html',
  styleUrls: ['./layer.component.css']
})
export class LayerComponent{
  @Input() temp
}

layer.component.html

<ng-container *ngTemplateOutlet="temp"></ng-container>

工作链接

https://stackblitz.com/edit/angular-xzlyhq?embed=1&file=src/app/layer/layer.component.html