Распространение экземпляра службы на компонент диалога, не работающий должным образом - PullRequest
Новая
       45

Распространение экземпляра службы на компонент диалога, не работающий должным образом

0 голосов
/ 24 сентября 2019

У меня есть простое воспроизведение того, чего я хочу достичь здесь, на stackblitz: https://stackblitz.com/edit/angular-zb8kvg

У меня есть компонент (здесь это app.component), на котором объявлен сервис (MyService).Мне нужен новый экземпляр MyService каждый раз, когда компонент открывается, поэтому мне кажется правильным, что служба объявлена ​​на уровне компонента, а не в модуле.

Теперь я хочу открыть диалоговое окно (MatDialog-> TestComponent) из этого компонента, которому требуется тот же экземпляр службы.

Я получаю StaticInjectorError, как видно из вывода консоли.

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

Ответы [ 2 ]

1 голос
/ 25 сентября 2019

Это потому, что диалог, даже если он был запрошен от вашего app.component, не является его дочерним элементом.Это можно увидеть, проверив элементы DOM диалогового окна: диалоговое окно где-то добавлено к корню body, в качестве родственного элемента к корневому элементу углового приложения.

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

Предлагаемое решение: вы можете передавать данные в MatDialogConfig параметре MatDialog.open, который имеет поле данных.

Эти данные можно использовать несколькими способами:

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

Пример: https://material.angular.io/components/dialog/examples (см. часть TS первого примера)

0 голосов
/ 24 сентября 2019

Вы не предоставили услугу в своем компоненте, свойство "предоставить" отсутствует 

@Component({
 selector: 'app-test',
 template: '<h1>TestComponent</h1>',
 providers: [MyService] //Missing
 })
...