Question

我正面临着Angular的一个奇怪问题。我想将TemplateRef作为输入传递给我的组件，以便我可以利用它，但Angular在更改或定义时不会更新ref。这就是我正在做的事情：

我要传递的{p> DummyComponent TemplateRef：

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

@Component({
  selector: 'dummy',
  template: `<h1>Dummy: {{name}}</h1>`
})
export class DummyComponent implements OnChanges{ 

  @Input()
  public templateRef: TemplateRef<any>;

  name = 'Angular';

  public ngOnChanges(changes: SimpleChanges) {
    // Template ref is not updating.
    console.log('DummyComponent -->', changes);
  }
}

AppComponent正在使用DummyComponent：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
  <button (click)="flag=!flag">Toggle</button>
  <br>{{flag}}
  <ng-container *ngIf="flag">
    <ng-template #myTemp></ng-template>
  </ng-container>
  <pre>
    <!-- TemplateRef is not updating -->
    <dummy [templateRef]="myTemp"></dummy>
  </pre>
  `
})
export class AppComponent { name = 'Angular'; flag = false; }

如您所见，我正在为myTemp组件提供dummy模板参考。当myTemp ref被定义时，即当flag = true时;它应该传递给DummyComponent。但它没有发生。谁能告诉我我错过了什么？这是plunkr可以玩的。

Angular：作为组件输入的TemplateRef未更新。

0 个答案: