Angular 中的对话框不显示模板

Question

I followed the Angular Tour of Heroes tutorial: https://angular.io/tutorial and I wanted to try adding a button that triggers a dialog on the dashboard ( https://material.angular.io/components/dialog/overview ) . 但是，当我按下“测试对话框”按钮时，会弹出一个空/空白对话框，它是一个又长又窄的框，出现在我的屏幕左侧，占据了整个高度。 我不知道为什么它不显示来自 DialogtestComponent 的 html。 这是我与对话框相关的代码：

dialogtest.component.html

<h2 mat-dialog-title>Dialog with elements</h2>

<mat-dialog-content>This dialog showcases the title, close, content and actions elements.</mat-dialog-content>

<mat-dialog-actions>

  <button mat-button mat-dialog-close>Close</button>

</mat-dialog-actions>

dialogtest.component.ts

import { Component, OnInit } from '@angular/core';

import { MatDialogRef } from '@angular/material/dialog';

import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

 

@Component({

  selector: 'app-dialogtest',

  templateUrl: './dialogtest.component.html',

  styleUrls: ['./dialogtest.component.css']

})

export class DialogtestComponent implements OnInit {
 
  constructor(public dialoRef: MatDialogRef<DialogtestComponent>, private fb: FormBuilder) { }
 

  ngOnInit(): void {

  }

}

仪表板.component.ts

import { Component, OnInit } from '@angular/core';

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

import { DialogtestComponent } from '../dialogtest/dialogtest.component';

import { Hero } from '../hero';

import { HeroService } from '../hero.service';

 

@Component({

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: [ './dashboard.component.css' ]

})

export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];


  constructor(private dialo: MatDialog, private heroService: HeroService) { }
 

  ngOnInit() {

    this.getHeroes();

  }


  getHeroes(): void {

    this.heroService.getHeroes()

      .subscribe(heroes => this.heroes = heroes.slice(1, 5));

  }


  openDialog() {

    const dialogConfig = new MatDialogConfig();

    //dialogConfig.disableClose = true;

    dialogConfig.autoFocus = true;

    dialogConfig.width = '100%';

    this.dialo.open(DialogtestComponent, dialogConfig);

    const dialoRef = this.dialo.open(DialogtestComponent, dialogConfig);

  }

}

仪表板.component.html

<h2>Top Heroes</h2>

<div class="heroes-menu">

  <a *ngFor="let hero of heroes"

    routerLink="/detail/{{hero.id}}">

    {{hero.name}}

  </a>
  
  <button style="float: right;" mat-raised-button color="primary" (click)="openDialog()">Test Dialog</button>

</div>
<app-hero-search></app-hero-search>

app.module.ts

import { NgModule } from '@angular/core';

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

 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { HeroesComponent } from './heroes/heroes.component';

import { FormsModule } from '@angular/forms';

import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { MessagesComponent } from './messages/messages.component';

import { DashboardComponent } from './dashboard/dashboard.component'; // <-- NgModel lives here

import { HttpClientModule } from '@angular/common/http';

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';

import { InMemoryDataService } from './in-memory-data.service';

import { HeroSearchComponent } from './hero-search/hero-search.component';

import { DialogtestComponent } from './dialogtest/dialogtest.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatDialogModule } from '@angular/material/dialog';

 

@NgModule({

  declarations: [

    AppComponent,

    HeroesComponent,

    HeroDetailComponent,

    MessagesComponent,

    DashboardComponent,

    HeroSearchComponent,

    DialogtestComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    FormsModule,

    MatDialogModule,

    HttpClientModule,

    HttpClientInMemoryWebApiModule.forRoot(

      InMemoryDataService, { dataEncapsulation: false }

    ),

    BrowserAnimationsModule

  ],

  providers: [],

  bootstrap: [AppComponent],

  entryComponents: [

    DialogtestComponent

  ]

})

export class AppModule { }

任何帮助，将不胜感激。 谢谢！

Answer 1

这里，

openDialog() {

    const dialogConfig = new MatDialogConfig();

    //dialogConfig.disableClose = true;

    dialogConfig.autoFocus = true;

    dialogConfig.width = '100%';

    this.dialo.open(DialogtestComponent, dialogConfig);

    const dialoRef = this.dialo.open(DialogtestComponent, dialogConfig);

  }

你打开了两次对话框

它应该是

openDialog() {

    const dialogConfig = new MatDialogConfig();

    //dialogConfig.disableClose = true;

    dialogConfig.autoFocus = true;

    dialogConfig.width = '100%';


    const dialoRef = this.dialo.open(DialogtestComponent, dialogConfig);

  }

您将宽度设为 100% ( dialogConfig.width = '100%'; )。 然而，对话框的最大宽度默认为80vw 。 如果内容很大，那么模态高度和宽度将会增加。 在您的情况下，模态的内容只有几行，这就是它看起来很小的原因。 而是给 100% 宽度尝试给dialogConfig.width = '250px'

您可以在此处查看实时示例

在此处参阅有关 Angular 材料对话框的更多信息

Answer 2

在您的 openDialog 尝试返回 dialogRef 以便它启动属性，并添加订阅，如下所示：

openDialog() {

const dialogConfig = new MatDialogConfig();

//dialogConfig.disableClose = true;

dialogConfig.autoFocus = true;

dialogConfig.width = '100%';


const dialoRef = this.dialo.open(DialogtestComponent, dialogConfig);

return dialoRef.afterClosed() 
}

否则，您只是将 const 设置为 dialoRef open，您并没有真正告诉它必须这样做。

Answer 3

更新：当我测试对话框按钮时，我查看了控制台，发现我收到了 NullInjectorError。 解决方法是将import { ReactiveFormsModule } from '@angular/forms'添加到 app.module.ts 并将其添加到导入中。