<mat-对话框-title>和<mat-对话框>不知道被识别，但是<mat-对话框-action>和<mat-对话框-content>被识别。

Question

使用的浏览器- Chrome 67.0.3396.99

我已经创建了一个DialogsModule，它有一个具有以下模板confirm-dialog.component.html的组件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*

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

下面贴的是我的源代码。

confirm-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));```

Answer 1

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

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

而且，我也不认为有mat-dialog指令或来自角度/材料的组件。