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

Question

MyComponent 例如：

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

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

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

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

我的问题是如何在代码中检查是否有 <template> 节点和 use/read 它的 innerHTML？

Answer 1

您可以使用 ContentChild(TemplateRef)，然后在定义模板并且只是 html 时进行渲染。这是一个例子。这是为了 Angular 2。为了 Angular 4 '*ngIf;else 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>的子节点？

How to check if component has a child node of <template></template>?

typescript

angular2-directives

angular2-components

angular