Angular компонент в NgbModal не может использовать @viewchild для доступа к методам внутри - PullRequest
Новая
       25

Angular компонент в NgbModal не может использовать @viewchild для доступа к методам внутри

0 голосов
/ 31 марта 2020

У меня возникла следующая проблема, я думаю, что это частый случай, но я не смог ее решить. У меня есть небольшой компонент предупреждения об ошибке, внутри которого есть метод для отображения ошибки. Я использую его в компонентах маршрута: я использую запрос @viewChild для доступа к его методу addNewMessage, и он работает.

На этот раз у меня есть NgbModal из ng- bootstrap, и я открываю компонент с этим. В этом компоненте мне нужно использовать мой компонент error, чтобы показать ошибку, но я не могу заставить компонент error корректно загружаться внутри модального типа, и я не могу получить доступ к его методам с помощью viewChild, я не уверен, что это проблема с viewChild или компонентом не загружается из-за отсутствия чего-либо в конфигурации модулей.

Вот как я называю мой модальный (NewRecordingFormComponent) в компоненте маршрута: 

const modalRef = this.modalService.open(NewRecordingFormComponent);

Так я использую свой компонент ошибки внутри модальности: 

<voice-error-alert-component #alertComponent></voice-error-alert-component>

И вот как компонент показан в html после компиляции: 

<voice-error-alert-component _ngcontent-dhb-c7=""></voice-error-alert-component>

Это запрос viewChild, который я использую в NewRecordingFormComponent: 

@ViewChild('alertComponent', { static: false }) alertComponent: ErrorAlertComponent;

Этот запрос работает в компонентах маршрута.

Я понятия не имею, как сделать эту работу, когда я смотрю на html, я должен видеть внутри него ng-for, но я ничего не вижу здесь, это заставляет меня думать, что компонент не компилируется, как если бы angular не знал его компонент и просто оставил его как простой html.

Я чувствую, что этот компонент не будет Возможно, из-за того, как я открываю его модальным bootstrap? это потому, что я использую его на динамическом c компоненте, и поскольку он не привязан к какому-либо маршруту, он не загружается? Нужно ли загружать y вручную или объявлять его вручную, чтобы его можно было использовать в модале?

Что еще можно здесь указать, чтобы я мог получить помощь по этому вопросу? Я довольно новичок в этой версии angular, я ищу, но я не могу найти что-то похожее на то, что я вижу, любая помощь очень ценится !!!

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Эта статья дала мне ответ: https://angular-2-training-book.rangle.io/modules/feature-modules

Реальная проблема заключалась в том, что мой компонент не загружался в мой динамический c компонент (модальный).

Причина этого в том, что у меня есть файл модуля для приложения, а затем небольшие файлы модуля для разделов приложения, обычно определяемые маршрутами.

Если вы хотите использовать компонент внутри другой компонент, то вам нужно добавить его в файл .module для этого компонента. Но что, если вам нужен модальный (динамический компонент c) с дочерним компонентом, вам нужно объявить этот дочерний компонент в app.module.ts, чтобы все компоненты могли его видеть. Способ сделать это - создать небольшой файл .module для каждого компонента, который вам нужно представить в приложении, для динамической загрузки следующим образом: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ErrorAlertComponent } from './error-alert-component.component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    ErrorAlertComponent
  ],
  providers: [],
  exports: [ErrorAlertComponent]
})
export class ErrorAlertModule {}

Затем импортировать ErrorAlertModule в модуль более высокого уровня в ваше приложение и все, оно будет работать тогда!

Не стесняйтесь просить каких-либо разъяснений, спасибо @mohammad omar за помощь!

0 голосов
/ 31 марта 2020

Попробуйте записать переменную viewchild в ngAfterViewInit (console.log (alertComponent);)

, пожалуйста, ответьте на результат

...