如何使用 ng 模板和 ng 容器制作 pratik 页面

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>

工作link

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

如何使用 ng 模板和 ng 容器制作 pratik 页面

How do I make pratilk pages with ngTemplate and ngContainer

angularjs-directive

angular

angular8