Angular 6 вложенных ViewChild внутри ng-шаблона имеет значение null - PullRequest
Новая
       23

Angular 6 вложенных ViewChild внутри ng-шаблона имеет значение null

0 голосов
/ 08 ноября 2018

Мы используем модальное ( ng-bootstrap's ) в нашем приложении. Этот модальный выглядит так: 

<ng-template #modal let-modal>
    <app-audio #audio></app-audio>
</ng-template>

И это логика: 

@ViewChild('modal')
modal: ElementRef;

@ViewChild('audio')
audio: AudioComponent;

Модал открывается с помощью:

this.modalService.open (this.modal, {size: 'lg'});

Все хорошо, пока здесь. Модал открывается и аудио компонент отображается. Но теперь мы хотим получить доступ к логике, которая находится внутри компонента, и когда мы делаем что-то вроде:

this.audio.somePublicComponentFunction ()

Бывает, что this.audio нулевой. Я уже пытался получить ребенка с детектором угловых изменений, но не могу найти способ правильно связать this.audio с реальным компонентом. Есть идеи? Большое спасибо.

Вы можете увидеть проблему здесь: stackblitz.com/edit/angular-ofmpju

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете вызвать метод audio.someFunction() из самого шаблона. 

<ng-template #modal let-modal>
  <div style="background-color: red;"> 
  <h1>Modal header</h1>
  <app-audio #audio></app-audio>
  <!-- on click, call audio comp method someFunction() using its reference --> 
  <button (click)="audio.someFunction()">Operate with audio from inside modal</button>
  </div>
</ng-template>

Нет необходимости @ViewChild собственности здесь. Это должно помочь вам.

Forked демо

0 голосов
/ 08 ноября 2018

Вы можете прочитать дочерний компонент без переменной refrence, как это 

@ViewChild(AudioComponent)
audio: AudioComponent;

Это даст вам экземпляр дочернего компонента - где вы можете получить доступ к методу

this.audio.someComponentFunction()

Ваш HTML 

<ng-template #modal let-modal>
    <app-audio></app-audio>
</ng-template>

Я думаю, это решит вашу проблему - Счастливое кодирование

Обновление:

Надеюсь, я нашел обходной путь для этой проблемы - если вы хотите запустить только одну функцию, вы можете использовать этот метод

Я только что добавил свойство с getter и setter и вызвал функцию, когда мы set значение 

@Input()
  get triggerFunction(): boolean {
    return this.runFuntion;
  }

  set triggerFunction(value: boolean) {
    this.runFuntion = value;
    this.someFunction();
  }

Таким образом, это вызывает запуск функции каждый раз, когда появляется модель - упомянутое выше свойство принадлежит дочернему компоненту, который вложен в <ng-template>, поэтому в итоге шаблон модели будет выглядеть так, как указано ниже: 

<ng-template #modal let-modal>
  <app-audio [triggerFunction]="true"></app-audio>
</ng-template>

Надеюсь, что это покажет обходной путь - спасибо

...