Question

我有一个仅显示（默认）按钮的组件。但是，如果从父组件（使用@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 个答案: