Question

我正在尝试使用angular-material创建一个登录表单。我正在使用@angular/material": "^7.3.0。

在app.module.ts中，我导入了以下内容，并将它们也放入了imports数组中，

import {
  MatToolbarModule, MatFormFieldModule, MatInputModule,
  MatOptionModule, MatSelectModule, MatIconModule, 
  MatButtonModule, MatCardModule, MatTableModule,
  MatDividerModule, MatSnackBarModule
} from '@angular/material';

在message.components.ts中，我有以下内容

import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
import { Component, OnInit, Inject, Injectable } from '@angular/core';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})

export class MessageComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<MessageComponent>, 
               @Inject(MAT_DIALOG_DATA) public data: any) {
          }
          public closeMe() {
            this.dialogRef.close();
          }
          ngOnInit() {
          }
        }

在我的模板message.component.html中，

<h1 mat-dialog-title>Message</h1>
<mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button (click)="closeMe()">Close</button>
</mat-dialog-actions>

我遇到了mat-dialog-actions和mat-dialog-content的错误，

'mat-dialog-content' is not a known element:
'mat-dialog-actions' is not a known element:

根据文档angular-material，这两个指令均可用。代码中可能有什么问题？预先谢谢你。

Answer 1

您似乎忘记了将MatDialogModule导入到AppModule中（至少我在提供的导入列表中没有看到它）。
为了将来参考，API文档标签的第一行将告诉您您需要导入的模块。

Answer 2

@Brandon我不确定您是否解决了这个问题，只是列出我的发现。即使在导入 MatDialogModule之后也遇到了同样的错误问题，我最终发现我们也需要在下面进行导入，看起来它没有引发确切的错误 import { MatButtonModule } from '@angular/material/button';

Answer 3

首先，您需要确保将MatDialogModule导入到AppModule中。

您可以同时执行以下操作：

<div mat-dialog-content></div>
<div mat-dialog-actions></div>

或

<mat-dialog-content></mat-dialog-content>
<mat-dialog-actions></mat-dialog-actions>

如果您在Angular Materials git repo中查看components / src / material / dialog / dialog-module.ts的来源，它将导出以下指令。

import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogTitle,
} from './dialog-content-directives';

exports: [
    ...
    MatDialogClose,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    ...
  ]

，并且〜/ dialog-content-directives.ts中的每个指令都遵循类似的声明

@Directive({
  selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
  host: {'class': 'mat-dialog-content'}
})
export class MatDialogContent {}

如果问题仍然存在，请尝试以下操作

npm cache clean --force

然后再次运行您的项目。

Answer 4

我在重构代码时遇到了类似的错误。

问题是因为组件重复（复制粘贴我的对话框在 2 个地方）。我将新的重命名为不同的名称，问题消失了

ERROR in src/app/components/blah/result-dialog.html:2:1 - error NG8001: 'mat-dialog-content' is not a known element:
1. If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <mat-dialog-content >
  ~~~~~~~~~~~~~~~~~~~~~

Answer 5

从 Angular 7 更新到 11 之后，现在不仅有 app.module.ts，而且每个组件中都有一个 componentname.module.ts。

我不得不在那里导入 MatDialogModule（和 MatButtonModule 以获得更好看的按钮）！

错误“ mat-dialog-content”不是已知元素

5 个答案: