<mat-dialog-title> 并且<mat-dialog>不知道被<mat-dialog-actions>认可但被<mat-dialog-conten

Question

使用的浏览器-Chrome 67.0.3396.99

---

我创建了一个DialogsModule，它有一个具有以下模板confirm-dialog.component.html的组件ConfirmDialog.component.ts

确认对话框.组件.html

<mat-dialog>    
<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat-dialog-content>
<mat-dialog-actions> 
<button type="button" mat-raised-button color="primary"
(click)="dialogRef.close(true)">Yes</button>
<button type="button" mat-button 
(click)="dialogRef.close()">No</button>
</mat-dialog-actions>
</mat-dialog>

我得到以下错误

*Uncaught Error: Template parse errors:
'mat-dialog-title' is not a known element:
1. If 'mat-dialog-title' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-dialog> [ERROR ->]<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat-dialog-content>"): ng:///DialogsModule/ConfirmDialog.html@2:1
'mat-dialog' is not a known element:
1. If 'mat-dialog' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-dialog> 
<mat-dialog-title>{{title}}</mat-dialog-title>
<mat-dialog-content>{{message}}</mat"): ng:///DialogsModule/ConfirmDialog.html@1:0*

如果我从模板中删除<mat-dialog>和<mat-dialog-title>元素，那么一切都很好。

---

下面发布的是我的源代码。

确认对话框组件.ts

import { MatDialogRef } from '@angular/material';
import { Component } from '@angular/core';
@Component({
selector: 'confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./dialogs.scss']
})
export class ConfirmDialog {
public title: string;
public message: string;
constructor(public dialogRef: MatDialogRef<ConfirmDialog>) {
}
}

对话框.module.ts

import { DialogsService } from './dialogs.service';
import { MatDialogModule, MatButtonModule } from '@angular/material';
import { NgModule } from '@angular/core';
import { ConfirmDialog }   from './confirm-dialog.component';
@NgModule({
imports: [
MatDialogModule,
MatButtonModule,
],
exports: [
ConfirmDialog,
],
declarations: [
ConfirmDialog,
],
providers: [
DialogsService,
],
entryComponents: [
ConfirmDialog,
],
})
export class DialogsModule { }

对话框服务.ts

import { Observable } from 'rxjs';
import { ConfirmDialog } from './confirm-dialog.component';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DialogsService {
constructor(private dialog: MatDialog) { }
public confirm(title: string, message: string): Observable<boolean> {
let dialogRef: MatDialogRef<ConfirmDialog>;
dialogRef = this.dialog.open(ConfirmDialog);
dialogRef.componentInstance.title = title;
dialogRef.componentInstance.message = message;
return dialogRef.afterClosed();
}
}

最后是调用代码

let res1
this.dialogsService
.confirm('Confirm Dialog', 'Are you sure you want to do this?')
.subscribe(res => console.log(res));```

Answer 1

mat-dialog-title应该用作指令，而不是组件

<title mat-dialog-title>{{title}}<//title>

而且我不认为有mat-dialog指令或来自角度/材料的分量。