0

我想根据条件将 html 元素从父 级传递 给子级

为了解决这个问题，我使用ngTemplateOutlet， ngContent通过角度的内容投影概念。

我在控制台中收到错误错误错误：templateRef.createEmbeddedView 不是函数

我试过这样

  <button (click)="getType('button')">Display button in child</button>
  <div>
  <label>checkbox</label>
  <input type="checkbox" (change)="getType('checkbox')">
  </div>
  <app-child>

  <ng-container [ngTemplateOutlet]="dynamicElement"></ng-container>

        <ng-template #tp2>
        <button>Hey I am button passed dynamically from parent</button>
        </ng-template>

          <ng-template #tp3>
        <label>I am checkbox passed from parent</label>
       <input type="checkbox" (change)="getType('checkbox')">
        </ng-template>

请找到我制定的链接https://stackblitz.com/edit/angular-yzzsgs-dnfgaq?file=src/app/app.component.ts

还有其他方法吗？

任何帮助都会很明显

提前致谢

4

2 回答 2

3

修改您的代码如下：

export class AppComponent {

  @ViewChild('tp2') public readonly tp2;
  @ViewChild('tp3') public readonly tp3;

  title = 'Tour of Heroes';
  dynamicElement: any;
  heroes = [
    new Hero(1, 'Windstorm'),
    new Hero(13, 'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20, 'Tornado')
  ];
  myHero = this.heroes[0];

  getType (type) {
    console.log(type);
    if (type == 'button') {
      this.dynamicElement = this.tp2;
    } else {
      this.dynamicElement = this.tp3;
    }
  }
}

您需要顺便从“@angular/core”导入 ViewChild 指令，并从模板中获取 Ref 以将其传递给 ngTemplateOutlet

于 2019-06-24T12:39:35.190 回答
1

你可以使用这个@ViewChild概念；有关更多信息，请查看其Angular 文档。该文档有一个倒计时组件的示例，其中每次启动父级本身时，父级都会启动其子级。

于 2019-06-24T12:40:22.640 回答