Question

MyComponent例如：

<div [my-component]="'text'"></div>

在代码中我有this.viewContainerRef这是节点本身（<div>）。

但是用户可能希望将其模板添加到myComponent，所以他会这样做：

<div [my-component]="'text'">
   <template>
   ...
   </template>
</div>

我的问题是如何在代码中检查是否有<template>节点并使用/读取其innerHTML？

Answer 1

您可以使用ContentChild（TemplateRef），然后在定义模板时以及仅仅是html时使用它。这是一个例子。这适用于Angular 2.对于Angular 4'* ngIf;可以使用“Block”。

  @Component({
    selector: '[my-component]',
    template: `
      my-component with input {{v}}
      <ng-container *ngIf="tpl">
        Template block:
        <ng-container [ngTemplateOutlet]="tpl"></ng-container>
      </ng-container>

      <ng-container *ngIf="!tpl">
        No Template block: <ng-content></ng-content>
      </ng-container>
    `
  })
  export class MyComponent {
    @Input('my-component') v : string;
    @ContentChild(TemplateRef) public tpl: TemplateRef;
  }
  @Component({
    selector: 'my-app',
    template: `
      <div>
        <div [my-component]="'text'">
          <template><pre>hi there</pre></template>
        </div>
        <hr>
        <div [my-component]="'text1'">
          aaa
        </div>
      </div>
    `,
  })
  export class App {
    constructor() {
    }
  }

如何检查组件是否具有<template> </template>的子节点？

1 个答案: