显示对话框消息答案

【问题标题】：Showing Dialog Message显示对话框消息
【发布时间】：2020-10-04 07:12:24
【问题描述】：

我是 Angular 的新手。我正在开发一个网页。当我单击一个对话框按钮时，它应该会在dialogComponent 中提示标题消息。但是，当我单击按钮时，它会提示对话框，但它没有显示 dialog.component.html 中的文本

这是app.component.ts 文件

import { Component } from '@angular/core';
import { MatDialog}  from "@angular/material/dialog";
import { DialogComponent } from "./dialog/dialog.component";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
constructor(public dialog:MatDialog){}
onCreate():void{
  const dialogRef = this.dialog.open(DialogComponent, {
    width:'290px',
    height:'300px',
    
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
   
  }
}

这是app.component.html文件

 <button mat-raised-button (click)="onCreate()">Open Dialog</button>

这里是dialog.component.html

<h1>Hello</h1>

这里是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DialogComponent } from './dialog/dialog.component';
import { MatDialogModule } from '@angular/material/dialog'
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { MatButtonModule,MatCheckboxModule,MatTableModule } from "@angular/material"
@NgModule({
  declarations: [
    AppComponent,
    DialogComponent
  ],
  entryComponents:[DialogComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatTableModule
    
  ],
  providers: [],
  bootstrap: [AppComponent],
  
})
export class AppModule { }

对话框显示为enter image description here

【问题讨论】：

您可以编辑问题并正确附加您的dialog.component.html 代码吗？
您是否在您的app.module.ts 中导入了MatDialogModule？
是的，我导入了。

标签： angular typescript angular-material

【解决方案1】：

您需要使用材料指令（mat-dialog-title mat-dialog-content 和 mat-dialog-actions 等）包装内容，阅读文档以获取更多信息。

https://stackblitz.com/angular/epgpjvbnjbl?file=src%2Fapp%2Fdialog-overview-example-dialog.html

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <mat-label>Favorite Animal</mat-label>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

【讨论】：