角度-如何在MatDialogRef材质对话框中使用自定义组件？

Question

我有一个名为List的模块+组件，它依次显示Item组件的列表（ <my-item></my-item> ）。 很好 但是，我似乎无法在从List组件打开的对话框中使用<my-item></my-item> 。

以下操作失败，并显示错误Template parse errors: 'my-item' is not a known element ：

list.component.ts:

import { Component } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router'
import { MatDialog, MatAccordionDisplayMode } from '@angular/material'

import { ItemDialogComponent } from '../../../../core/components/item-dialog/item-dialog.component'

@Component({
  templateUrl: './interview.component.html',
  styleUrls: ['./interview.component.scss'],
  providers: [],
})
export class ListComponent {
  showItemDialog = (item) => {
    const dialog = this.dialog.open(ItemDialogComponent, {
      data: {
        item,
      },
    })
    dialog.afterClosed().subscribe(result => {})
  }
}

list.component.html ：

<div>
    <ul>
        <li *ngFor="let item in items">
          <button (click)="showItemDialog(item)">View Item</button>
        </li>
    </ul>
</div>

item-dialog.component.html ：

<div mat-dialog-content>
  <my-item [item]="item"></my-item>
</div>

我想我只是需要以正确的方式导入ItemComponent ，或者需要以某种方式将其传递给MatDialog ，但是我似乎无法弄清楚该怎么做。

以下是模块：

item.module.ts ：

import { NgModule } from '@angular/core'

import { SharedModule } from '../../modules/shared.module'

import { ItemComponent } from './item.component'

@NgModule({
  declarations: [ItemComponent],
  imports: [SharedModule],
  exports: [SharedModule, ItemComponent],
})
export class ItemModule {}

item-dialog.module.ts ：

import { NgModule } from '@angular/core'

import { SharedModule } from '../../modules/shared.module'
import { ItemModule } from '../item/item.module'

import { ItemDialogComponent } from './item-dialog.component'

@NgModule({
  declarations: [ItemDialogComponent, Item],
  imports: [SharedModule],
  exports: [SharedModule, ItemDialogComponent, Item],
})
export class ItemDialogModule {}

Answer 1

尝试在ItemModule中导入ItemDialogModule

import { NgModule } from '@angular/core'

import { SharedModule } from '../../modules/shared.module'
import { ItemModule } from '../item/item.module'

import { ItemDialogComponent } from './item-dialog.component'

@NgModule({
  declarations: [ItemDialogComponent], <== No need to redeclare Item
  imports: [SharedModule, ItemModule], //<== Import the module here
  exports: [SharedModule, ItemDialogComponent],
})
export class ItemDialogModule {}

Answer 2

您可能没有在其中一个item中包含item组件

1. 您要声明的模块使用declares模块定义的end / or exports部分
2. 您没有在使用模块定义的imports包含模块