Блог

Главная - Вопросы по программированию - Отображение диалогового сообщения

Отображение диалогового сообщения

#angular #typescript #angular-material

#angular #typescript #angular-материал

Вопрос:

Я новичок в 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 { }

Диалоговое окно отображается как введите описание изображения здесь

Комментарии:

1. можете ли вы отредактировать вопрос и правильно прикрепить свой dialog.component.html код?

2. Вы импортировали MatDialogModule в свой app.module.ts ?

3. Да, я импортировал.

Ответ №1:

вам нужно обернуть содержимое директивами material ( mat-dialog-title mat-dialog-content и mat-dialog-actions т. Д.). Прочитайте документы, Чтобы получить дополнительную информацию.

https://stackblitz.com/angular/epgpjvbnjbl?file=src/app/dialog-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>