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

Вы можете прочитать дочерний компонент без переменной 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>

Надеюсь, что на данный момент это будет обходным путем. Спасибо.

Вы можете вызвать метод 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. Это должно помочь вам.

Разветвленная демонстрация

Для меня все эти решения не сработали, и я все еще хотел получить доступ к своему собственному компоненту внутри стороннего ng-шаблона. Вот мое «решение». Я не думаю, что это лучшая практика, но отчаянное решение получить то, что я хочу ;-) Конечно, это работает только для ваших собственных компонентов.

// mycomponent.ts => component that needs to be accessed 
import { Component, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './mycomponent.html'
})
export class MyComponent implements AfterViewInit {
   @Output() initialized: EventEmitter<MyComponent> = new EventEmitter<MyComponent>();

   ngAfterViewInit(): void {
        this.initialized.emit(this);
   }

   reload(): void {
        // Do something
   }
}


// somecomponent.html => component with <ng-template> holding MyComponent

<ng-template>
    <div class="btn-group ml-2">
      <my-component (initialized)="onMyComponentInitialized($event)"></my-component>
    </div>
</ng-template>


// somecomponent.ts => component with <ng-template> holding MyComponent
import { Component, OnDestroy } from '@angular/core';
import { MyComponent } from '../../my-component';

@Component({
    selector: 'some-component',
    templateUrl: './some-component.html'
})
export class SomeComponent implements OnDestroy {
    private _myComponent: MyComponent = null;

    onMyComponentInitialized(component: MyComponent) {
        this._myComponent = component;
    }

    someOtherMethod() {
        if (this._myComponent) {
            // Call some method on the component
            this._myComponent.reload();
        }
    }

    ngOnDestroy() {
        this._myComponent = null;
    }
}