Блог

Главная - Вопросы по программированию - Диалог использования очень сложный

Диалог использования очень сложный

#angular2-mdl

#angular2-mdl

Вопрос:

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

  1. Я не знаю, нужно ли мне что-то добавлять в мой app.module.ts
  2. Как создать этот диалог? Я действительно не понимаю, что существует много информации Dialogreference

Мне нужно установить его один раз? в моем корневом компоненте или что? поскольку он не будет работать, я могу добавить его в свой конструктор, как только у меня будет «нет поставщика MdlDialogReference», как только у меня будет «нет всех параметров (?)».

Фактический код:

ФАЙЛ app.component.ts 

 constructor( private vcRef: ViewContainerRef,
               private dialog: MdlDialogReference,  private dialogService: MdlDialogService, private httpService: HttpService, private communicationInsideServices : CommunicationInsideServices, private  activatedRoute : ActivatedRoute, private router : Router) {

  }

  get viewContainerRef() {
    return this.vcRef;
  }

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

Комментарии:

1. почему вы добавляете MdlDialogReference в качестве зависимости? вы хотели бы представить свой appcomonent как dialogcontent?

2. большое спасибо, я не знаю, что делает MdDialogReference, нет, я не хочу, чтобы компонент приложения был моим dialogcontent, нужно ли мне импортировать что-то в мой app.mobule.ts, где есть мой загрузочный NgModule, чтобы заставить этот диалог работать? Поскольку он не будет работать или я использую его неправильно, если у вас есть четкая демонстрация plunkr, это приветствуется

3. Я очищаю весь свой код и просто добавляю его в свой компонент в своем конструкторе: constructor(private dialogService: MdlDialogService) и в ngAfterViewInit let result = this.dialogService.alert('This is a simple Alert'); result.then( () => console.log('alert closed') ); я получаю эту ошибку `TypeError: не удается прочитать свойство ‘parentInjector’ неопределенного`

4. Plunkr был бы отличным. Вот шаблон plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview

5. @michael извините, здесь вы, может быть, немного подходите к тому, что я делаю plnkr.co/edit/bTFKPBvLR19pdXGsil5g?p=preview

Ответ №1:

Вы были близки к решению! Важно указать ViewContainerRef, к которому прикреплен диалог. Пожалуйста, взгляните на этот рабочий plnkr (http://plnkr.co/edit/HgAvCnzkWAmK1NVxfEUM?p=preview ) в app.component.ts:

 constructor(private dialogService: MdlDialogService,
  private viewContainerRef: ViewContainerRef){
    dialogService.setDefaultViewContainerRef(viewContainerRef);
}

Это нужно сделать только один раз. Можно предоставить viewConatinerRef для каждого showCustomDialog вызова, но проще сделать это один раз в конструкторе вашего корневого приложения. Должно появиться сообщение об ошибке, информирующее вас об этой недостающей информации (будет исправлено в следующем выпуске).

Обновление для версии 2.0.0: вам больше не нужно вызывать setDefaultViewContainerRef вручную. Просто добавьте dialog-outlet элемент в свой HTML-файл: таким образом:

 <html>
  <head>...</head>
  <body>
    <app-root>...</app-root>
    <dialog-outlet></dialog-outlet>
  </body>
</html>