Угловой 6 компонент как диалог (угловой материал dialogRef) и сам по себе одновременно. Является ли это возможным? - PullRequest
Новая
       35

Угловой 6 компонент как диалог (угловой материал dialogRef) и сам по себе одновременно. Является ли это возможным?

0 голосов
/ 15 сентября 2018

У меня есть компонент, который прекрасно работает сам по себе, но не работает как диалог.

Когда я использую DI для ввода dialogRef и MAT_DIALOG_DATA 

constructor(
  public dialogRef: MatDialogRef<ChannelsComponent>,   
  @Inject(MAT_DIALOG_DATA) private data: any
) { }

работает только как диалог, но перестает работать сам по себе. Когда я пытаюсь сделать этот компонент без диалога, я получаю:

StaticInjectorError (AppModule)

Итак, он работает, но только в одной роли - либо как отдельный компонент, либо как диалог, но не одновременно.

Вопрос заключается в следующем: можем ли мы использовать один и тот же угловой компонент как диалог и сам по себе (без диалога) одновременно?

UPDATE:

Упрощенные версии:

https://stackblitz.com/edit/angular-kg32ui - работает только как диалог, не работает, если нажать на меню «Каналы»

https://stackblitz.com/edit/angular-sr9b8h - работает как компонент и диалог, но не предоставляет данные для диалога

Единственное отличие в 'channel.component.ts' в том, что в 1-й версии эти сервисы внедрены в конструктор: 

constructor(
  public dialogRef: MatDialogRef<ChannelsComponent>,
  @Inject(MAT_DIALOG_DATA) private data: any
) { }

1 Ответ

0 голосов
/ 15 сентября 2018

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

Чтобы обойти это, я бы предложил вместо этого открывать ng-template в качестве содержимого диалога.

Для этого внутри html-шаблона создайте ng-template: 

<ng-template #dialog>
  <h1>Dialog content!</h1>
</ng-template>

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

@ViewChild('dialog') template: TemplateRef<HTMLElement>;

Вы также можете открыть его, как в обычном диалоге: 

this.dialogRef = this.dialog.open(this.template);

Рабочий пример можно посмотреть здесь: https://stackblitz.com/angular/nnorporgbvx

...