使用的浏览器 – Chrome 67.0.3396.99
我创建了一个DialogsModule,它有一个组件ConfirmDialog.component.ts,其中包含以下模板confirm-dialog.component.html
我创建了一个DialogsModule,它有一个组件ConfirmDialog.component.ts,其中包含以下模板confirm-dialog.component.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*
确认-dialogs.component.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>) { } }
Dialogs.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 { }
dialogs.service.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));
解决方法
mat-dialog-title应该用作指令而不是组件
<p mat-dialog-title>{{title}}</p>
而且我不认为angular/material中有mat-dialog指令或组件.