Я пытаюсь следовать документам на https://material.angular.io/components/component/dialog, но не могу понять, почему у него есть проблема ниже?
Я добавил ниже на моем компоненте:
@Component({
selector: 'dialog-result-example-dialog',
templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}
В моем модуле я добавил
import { HomeComponent,DialogResultExampleDialog } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
HomeComponent,
DialogResultExampleDialog
],
// ...
Все же я получаю эту ошибку ....
EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
ErrorHandler.handleError @ error_handler.js:50
next @ application_ref.js:346
schedulerFn @ async.js:91
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:77
NgZone.triggerError @ ng_zone.js:329
onHandleError @ ng_zone.js:290
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:346
schedulerFn @ async.js:91
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:77
NgZone.triggerError @ ng_zone.js:329
onHandleError @ ng_zone.js:290
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
angular
angular-material
Tampa
источник
источник
declarations
чтобы заставить вещи работатьВы должны использовать
entryComponents
под@NgModule
.Это для динамически добавляемых компонентов, которые добавляются с помощью
ViewContainerRef.createComponent()
. Добавление их в entryComponents позволяет автономному компилятору шаблонов скомпилировать их и создать для них фабрики.Компоненты, зарегистрированные в конфигурациях маршрутов, также добавляются автоматически,
entryComponents
посколькуrouter-outlet
также используютсяViewContainerRef.createComponent()
для добавления маршрутизируемых компонентов в DOM.Так что ваш код будет похож
источник
Это происходит потому, что это динамический компонент, и вы не добавили его в
entryComponents
under@NgModule
.Просто добавьте это туда:
Посмотрите, как команда Angular говорит о
entryComponents
:Кроме того, это список методов, в
@NgModule
том числеentryComponents
...Как видите, все они являются необязательными (посмотрите на вопросительные знаки), в том числе
entryComponents
которые принимают массив компонентов:источник
Если вы пытаетесь использовать
MatDialog
внутри службы - давайте назовем ее,'PopupService'
и эта служба определена в модуле с:тогда это может не сработать. Я использую отложенную загрузку, но не уверен, что это актуально или нет.
Ты должен:
PopupService
непосредственно компоненту, который открывает ваш диалог - используя[ provide: PopupService ]
. Это позволяет ему использовать (с DI)MatDialog
экземпляр в компоненте. Я думаю, что компонент вызоваopen
должен быть в том же модуле, что и компонент диалога в этом случае.matDialog
когда вы звоните в свой сервис.Извините за мой беспорядочный ответ, смысл в том, что это то,
providedIn: 'root'
что ломает вещи, потому что MatDialog должен отодвинуть компонент.источник
В случае отложенной загрузки, вам просто нужно импортировать MatDialogModule в загруженный модуль с отложенной загрузкой. Затем этот модуль сможет визуализировать компонент ввода с собственным импортированным MatDialogModule :
источник
Хотя интеграция материалов диалога возможна , я обнаружил, что сложность такой тривиальной функции довольно высока. Код становится более сложным, если вы пытаетесь достичь нетривиальных функций.
По этой причине я использовал PrimeNG Dialog , который я нашел довольно простым в использовании:
m-dialog.component.html
:m-dialog.component.ts
:m-dialog.module.ts
:Просто добавьте ваш диалог в HTML вашего компонента:
PrimeNG Документация PrimeFaces проста в использовании и очень точна.
источник
Вы должны добавить его
entryComponents
, как указано в документации .Вот полный пример файла модуля приложения с диалоговым окном, определенным как
entryComponents
.источник
Если вы похожи на меня и смотрите на эту тему, думая: «Но я не пытаюсь добавить компонент, я пытаюсь добавить охрану / службу / канал и т. Д.» тогда проблема, вероятно, в том, что вы добавили неправильный тип в маршрутный путь. Это то, что я сделал. Я случайно добавил элемент защиты: раздел пути вместо раздела canActivate :. Я люблю автозаполнение IDE, но вы должны немного замедлиться и обратить внимание. Если вы абсолютно не можете его найти, выполните глобальный поиск имени, на которое он жалуется, и посмотрите на каждое использование, чтобы убедиться, что вы не ошиблись с именем.
источник
В моем случае я добавил свой компонент в объявлений и entryComponents и получил те же ошибки. Мне также нужно было добавить MatDialogModule для импорта.
источник
Если кому-то нужно позвонить в «Диалог» из сервисов, вот как решить проблему. Я согласен с некоторыми из приведенных выше ответов, мой ответ для вызова диалога в службах, если у кого-то могут возникнуть проблемы.
Создайте сервис, например, DialogService, затем переместите свою диалоговую функцию внутри сервисов и добавьте свой диалог-сервис в компонент, который вы вызываете, как показано ниже:
в противном случае вы получите ошибку
источник