ViewChild возвращает «неопределенное» - Angular2

Причина, по которой он не работает, как это было бы в обычном сценарии с ng-template, заключается в том, что служба NgbModal создает шаблон и не прикрепляет его к родительскому представлению, а скорее к корневому ApplicationRef

const viewRef = content.createEmbeddedView(context);
this._applicationRef.attachView(viewRef);

https://github.com/ng-bootstrap/ng-bootstrap/blob/0f8055f54dad84e235810ff7bfc846911c168b7a/src/modal/modal-stack.ts#L107-L109

Это означает, что ваш запрос всегда будет чистым для вашего компонента.

В общих случаях (см. пример, предоставленный @ConnorsFan) мы используем vcRef.createEmbeddedView, который отвечает за проверку запросов. в родительском представлении:

vcRef.createEmbeddedView
          ||
          \/
function attachEmbeddedView(
   ...
  Services.dirtyParentQueries(view);  <========== set dirty for queries

https://github.com/angular/angular/blob/0ebdb3d12f8cab7f9a24a414885ae3c646201e90/packages/core/src/view/view_attach.ts#L12-L23

Простое решение, которое я вижу здесь, это просто передать или вызвать ссылку непосредственно в шаблоне:

(click)="traceRef.savePNG()"

Я думаю, вам нужно что-то, как показано ниже. замените ChildComponent именем вашего дочернего класса

@ViewChild('traceRef') 
      traceRef:ChildComponent

Я заметил, что ваш родительский шаблон является модальным, и вы открываете его с помощью переменной шаблона здесь: ((click)="open(content)" через ваш модальный сервис. Это означает, что он динамически добавляется в DOM.

Так что это может быть проблема синхронизации, потому что родитель загружается динамически.

Я бы попробовал это, в ngAfterViewInit CHILD, запустить событие, используя EventEmitter. Захватите событие в родительском элементе, а затем установите флаг в значение true. Затем В ТЕОРИИ вы можете сделать это в родительском:

  savePNG() {
    if (this.childLoaded) this.traceRef.savePNG();
  }

Вы точно знаете, что ребенок загружен, поэтому доступен savePNG. Однако см. мое примечание — traceRef все равно будет неопределенным.

Поэтому вам нужно передать ссылку на дочернюю функцию в EventEmitter и использовать ее вместо #traceRef.

Например - у ребенка:

export class app-com2 implements blah blah {
  @Output() childLoaded: EventEmitter<any> = new EventEmitter<any>();

  savePNG() {
    // code to save the image
  }

  ngAfterViewInit() {
    this.childLoaded.emit(this.savePNG);
  }
}

Родитель:

..com1.html

  <ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
      <h4 class="modal-title">Title</h4>
    </div>
    <div class="modal-body" style="display: flex; justify-content: center;">
      <app-com2 [var1]="value" (childLoaded)="handleChildLoaded($event)"></app-com2>
    </div>

..com1.ts

handleChildLoaded(save: any) {
  const result = save;
  console.log(result);
}

Документы по дочерним и родительским сообщениям.

ПРИМЕЧАНИЕ

Думая об этом больше - это проблема жизненного цикла/времени, поэтому ваш код никогда не будет работать. Может быть поэтому:

1. Ваш родительский компонент загружает, запускает все хуки жизненного цикла (например, ngOnInit и ngAfterViewInit и т. д.). #content обрабатывается и становится доступным в ngAfterViewInit и более поздних хуках.

2. Теперь вы нажимаете кнопку, чтобы загрузить #content (который доступен). Но у него есть компонент <app-com2>, на который ссылается переменная шаблона #traceRef. Но переменные шаблона обрабатываются только непосредственно перед срабатыванием хука ngAfterViewInit, который уже сработал для родителя, поэтому #traceRef приходит слишком поздно, чтобы Angular мог его подключить. Следовательно, он всегда будет неопределенным.

См. комментарии ниже относительно (2) - не совсем правильно, но я подозреваю, что из-за того, как вы загружаете модальное окно, #traceRef всегда будет неопределенным.