Angular - 如何在MatDialogRef材质对话框中使用自定义组件?

时间:2018-06-08 23:28:48

标签: angular

我有一个名为List的模块+组件,它反过来显示Item组件(<my-item></my-item>)的列表。这很好。但是,我似乎无法在<my-item></my-item>组件打开的对话框中使用List

以下错误导致错误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 {}

2 个答案:

答案 0 :(得分:0)

尝试导入if(mView == null){ LayoutInflater vi = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); mView = vi.inflate(id, null,false); }

中的ItemModule
ItemDialogModule

答案 1 :(得分:-1)

您可能没有将item组件包含在

  1. 模块您使用declares结束/或exports模块定义部分声明
  2. 您没有在使用模块定义的imports中包含您的模块