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 並將其添加到導入中。