Повторное использование существующего углового компонента в диалоге материала - PullRequest
Новая
       31

Повторное использование существующего углового компонента в диалоге материала

1 голос
/ 09 марта 2019

У меня есть существующий компонент ResultGridComponent, которому передаются данные @Input().Я хочу использовать тот же компонент для MatDialog.Поэтому я добавил @Inject(MAT_DIALOG_DATA) data в конструктор компонента ResultGridComponent.

constructor(private spinner: EdpLoaderService, private dialog: MatDialog, @Optional() @Inject(MAT_DIALOG_DATA) data) {}

Но когда компонент вызывается в соответствии с его обычным использованием, а не в виде диалога, я получаю следующую ошибку:

Ошибка ОШИБКИ: StaticInjectorError (AppModule) [ResultGridComponent -> InjectionToken MatDialogData]: StaticInjectorError (Платформа: ядро) [ResultGridComponent -> InjectionToken MatDialogData]: NullInjectorError: Нет поставщика для InjectionToken MatDialogData!

я уверен, что все импортированыПотому что я создал отдельный компонент для диалога и передал ему данные, и он работал нормально.Но я хочу повторно использовать компонент.И я почти уверен, что эта ошибка возникает, когда я вызываю конструктор дочернего компонента как обычный компонент, и конструктор не получает MatDialogData, переданный ему вызывающей стороной.

1 Ответ

1 голос
/ 11 марта 2019

Мне удалось найти решение ситуации.

Постановка проблемы: я пытался использовать существующий компонент (назовем его ChildComponent) в двух разных местах. Один как обычный дочерний компонент, а второй как компонент в диалоге материалов.

Задача: чтобы передать данные в диалоговый компонент, нам нужно @Inject (MAT_DIALOG_DATA) в дочернем компоненте. Но когда вы внедряете ChildComponent в обычный компонент, вы не предоставляете какого-либо поставщика для @Inject (MAT_DIALOG_DATA). Следовательно, происходит сбой во время инициализации. И нам нужен '@Inject (MAT_DIALOG_DATA)', если мы хотим использовать ChildComponent внутри диалога Mat.

Решения: 1. Создайте компонент-обертку, давайте вызовем его (ChildWrapperComponent). Для обычного варианта использования непосредственно вставьте ChildComponent в родительский компонент. Принимая во внимание, что для варианта использования Mat Dialog укажите ChildWrapperComponent 

const dialogRef  = this.dialog.open(ChildWrapperComponent, {
                 width: '90%',
                 disableClose: false,
                 data: {
                   fileName: this.fileName,
                   results: this.results
                 }
               } );

Теперь вы можете хранить данные внутри ChildWrapperComponent, используя данные @Inject (MAT_DIALOG_DATA) 

constructor(private spinner: EdpLoaderService, private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) data,
private dialogRef: MatDialogRef<ChildWrapperComponent>) {
this.setInputData(data);

}

Когда у вас есть данные внутри ChildWrapperComponent, вставьте дочерний компонент в оболочку и передайте данные с помощью @Input ().

  1. Я не пробовал другое решение, но для такого же обмена данными мог бы использоваться сервис, но я просто хотел выбрать более сложный маршрут: P.

Я новичок в Angular. Буду очень признателен за лучшее или другие решения.

...