有没有办法以角度方式将一个 ng 模板传递到另一个 ng 模板？

Question

我遇到了无法以角度传递嵌套 ng-container 的问题。 这不是确切的问题，但总的来说是我遇到的问题。

父组件.ts

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html'
})
export class Parent {}

parent.component.html

<ng-template #outer>
  <ng-template #inner>Content</ng-template>
</ng-template>

<child>
  <ng-container *ngTemplateOutlet="outer"></ng-container>
</child>

child.component.ts

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class Child{
     @ContentChild('inner') inner: TemplateRef<any>;
}

child.component.html

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

我希望加载外部模板的

ngTemplateOutlet

在编译过程中被内部模板替换，如下所示：

<child>
  <ng-template #inner>Content</ng-template>
</child>

...这样子组件就能识别模板引用。但这似乎并没有发生。

有任何想法/想法来解决这个问题或改变我的策略吗？

Answer 1

我可以从您的代码中检查内部模板引用是在外部模板内部定义的，而

Angular's ContentChild

中的

Child component

没有

automatically recognize

它，这是问题的根本原因。

这可以通过将内部模板引用显式传递给

Child component

来处理。

请查找文件的更新代码。

parent.component.ts

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html'
})
export class Parent {
  @ViewChild('inner', { static: true }) innerTemplate: TemplateRef<any>;
}

parent.component.html

<ng-template #outer>
  <ng-template #inner>Content</ng-template>
</ng-template>
<child [innerTemplate]="innerTemplate"></child>

child.component.ts

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class Child {
  @Input() innerTemplate: TemplateRef<any>;
}

child.component.html

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

请告诉我这是否适合您。