Как получить доступ к переменной шаблона во встроенном представлении? - PullRequest
Новая
       46

Как получить доступ к переменной шаблона во встроенном представлении?

0 голосов
/ 09 февраля 2019

У меня есть компонент, который просто отображает кнопку (по умолчанию).Однако эта кнопка может быть переопределена пользовательской кнопкой, если она была передана ей (с помощью @Input) из родительского компонента.

После того, как дочерний компонент загрузит этот шаблон в ng-контейнер, какдоступ дочернего компонента #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

...