Angular: невозможно прочитать свойство sendClassForm неопределенного внутри ng-шаблона NgbModal

Хорошо, во-первых, я уже искал эту проблему как сумасшедший и нашел несколько решений (некоторые из них описаны здесь), но ни одно из них не объясняет эффективный способ сделать это. Итак, я иду...

О чем это

Я создаю модальное окно, которое использует ng-bootstrap. Я сделал компонент формы, чтобы повторно использовать его на других страницах. Я поместил этот компонент внутрь модального окна. Мне нужно получить доступ к переменным и методам этого компонента от родительского компонента, поэтому я установил переменную ViewChild в родительском компоненте и установил ее в дочерний компонент.

Когда я открываю модальное окно, компонент отображается без проблем. Проблемы возникают, когда я нажимаю кнопку «Создать». Когда пользователь нажимает кнопку «Создать», родитель (который содержит модальное окно) выполняет дочерний метод для отправки формы, но родитель не может связаться с дочерним методом, потому что он не определен, даже если модальное окно уже открыто.

Что я уже пробовал

Я попытался поместить компонент Child вне ng-шаблона, и он отлично работает, но мне нужно, чтобы он был модальным.

Я также попытался передать компонент с #id в директиве методу родителя, чтобы выполнить дочерний метод. Это работает, но делает код более грязным и приносит больше проблем в будущем. (На самом деле это я из будущего, у которого больше проблем с этой реализацией.)

Если кто-то задается вопросом, какие проблемы это приносит, мне нужно вложить больше компонентов в дочерний компонент, поэтому, поскольку этот «внучатый» компонент все еще находится в ng-шаблоне, проблема повторяется, и теперь я должен снова сделать код более грязным. ..

Код (приложение Stackblitz)

Вот приложение Stackblitz, которое я сделал. Я сделал это довольно просто и исключил ненужные части кода, которые не имеют отношения к проблеме. Приложение Stackblitz

Ошибка сообщения, которую я получаю

Это сообщение об ошибке, которое я получаю:

ERROR TypeError: Cannot read property 'sendClassForm' of undefined

Я читал, что когда ng-template еще не отрендерен (например, модальное окно не было открыто), вы получаете эту ошибку undefined, но я не понимаю, почему это все еще происходит, когда он уже открыт.

Угловая версия: 8.1.2

"@ng-bootstrap/ng-bootstrap": "^5.1.0"

Luis Gerónimo 29.08.2019 источник

Ответы (1)

arrow_upward
0
arrow_downward

Благодаря @yurzui, который настаивал на своем решении, я придумал другое решение, которое я считаю почти таким же, как наличие ViewChild, но без проблем.

Вот код Stackblitz, если вы хотите увидеть его сразу, вместо моего объяснения.

Приложение Stackblitz

Родительский компонент

Я установил свойство так же, как и для ViewChild, но удалив часть ViewChild.

classFormComponent: ClassFormComponent; // No 'ViewChild(...)' part

А также создал метод для сохранения в переменной выше ссылки на дочерний компонент, когда это необходимо.

// This method will be called by the ClassFormComponent when it gets ready to be used by the Parent.
saveReference( classFormComponent: ClassFormComponent ) {
    this.classFormComponent = classFormComponent;
}

Родительский HTML

Затем я устанавливаю прослушиватель на app-class-form, чтобы, когда дочерний элемент был готов, он мог сообщить об этом родителю, вызвав родительский метод, описанный выше.

<app-class-form (componentIsReady)="saveReference( $event )"></app-class-form>

Дочерний компонент

У ребенка есть Output EventEmitter.

@Output() componentIsReady: EventEmitter<ClassFormComponent> = new EventEmitter();`

И это событие генерируется на этапе жизненного цикла ngOnInit.

ngOnInit() {

    // At this point, child component is born and it's ready to be used by the parent.
    this.componentIsReady.emit(this);
}

Таким образом, родитель получает доступ к дочерним методам и атрибутам.

Я говорю, что это решение, обратное тому, что было у меня, потому что теперь потомок достигает родителя, когда готов, и только тогда родитель сохраняет ссылку на него.

Luis Gerónimo 31.08.2019