如何在嵌入式视图中访问模板变量?

时间:2019-02-08 22:05:15

标签: angular2-template viewchild ng-container

我有一个仅显示(默认)按钮的组件。但是,如果从父组件(使用@Input)将其传递给自定义按钮,则该按钮可以被自定义按钮覆盖。

子组件将该模板加载到ng-container中之后,子组件如何访问#btn?看来ViewChild仅适用于静态模板-不适用于createEmbeddedView()插入模板后的情况

这是在以下位置传递模板的父组件:

@Component({
  selector: 'my-app',
  template: `

<app-my-button [customButton]="customButton"></app-my-button>

<ng-template #customButton>
  <button #btn>custom button</button>
</ng-template>`

})
export class AppComponent  {
  @ViewChild('customButton', {read:TemplateRef}) customButton; 
}

这是子组件:

@Component({
  selector: 'app-my-button',
  template: `

<ng-container></ng-container>

<ng-template #defaultButton>
  <button #btn>Default Button</button>
</ng-template>
`
})
export class MyButtonComponent {
  @Input() customButton;
  @ViewChild('defaultButton', {read:TemplateRef}) defaultButton;

  constructor(private vc:ViewContainerRef) { }

  ngAfterViewInit() {
    this.vc.createEmbeddedView(this.customButton || this.defaultButton);
   // now i want to get the elementRef of the custom button's #btn - How?
  }   
}

https://stackblitz.com/edit/angular-421dkm?file=src%2Fapp%2Fmy-button.component.ts

0 个答案:

没有答案