Angular Material Dialog 隐藏元素答案

【问题标题】：Angular Material Dialog hiding elementsAngular Material Dialog 隐藏元素
【发布时间】：2021-02-11 06:13:09
【问题描述】：

我想在 node.js Angular 项目中创建一个确认对话框，这看起来很简单。我正在使用 Material 样式，以加快开发速度。

运行项目时，打开的对话框是空的：

对话框组件dialog.component.ts有点灵活，看起来像这样：

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
  title: string;
  text: string;
  cancelButton: string;
  acceptButton: string;
}

@Component({
  selector: 'dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})

export class DialogComponent {

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

  onNoClick() {
    this.dialogRef.close();
  }
}

打开对话框的组件是这样的（一些不必要的部分被剪掉了）：

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { finalize } from 'rxjs/operators';
import { QuestUpdate } from 'src/app/enums/questUpdate';
import { Constant } from 'src/app/interfaces/constant';
import { Quest } from 'src/app/interfaces/quest';
import { User } from 'src/app/interfaces/user';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { ConstantService } from 'src/app/services/constant.service';
import { QuestService } from 'src/app/services/quest.service';
import { UserService } from 'src/app/services/user.service';
import { environment } from 'src/environments/environment';
import { AbstractComponent } from '../abstract.component';
import { DialogComponent, DialogData } from '../common/dialog/dialog.component';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent extends AbstractComponent implements OnInit {

  loading = true;
  user: User;
  quests: Quest[] = [];
  xpNeeded: number;

  constructor(protected authenticationService: AuthenticationService,
              protected userService: UserService,
              protected constantService: ConstantService,
              public router: Router,
              protected questService: QuestService,
              public dialog: MatDialog) {
    super(authenticationService, userService, constantService, router);
  }

  ngOnInit(): void {
    // ...
  }

  getQuestListForUser(id: number) {
    // ...
  }

  getXPNeeded() {
    // ...
  }

  updateQuest(questUpdate: {questId: number, update: QuestUpdate}) {
    // can call openConfirmFinishDialog
  }

  openConfirmFinishDialog(quest: Quest) {
    const data: DialogData = {
      title: 'Confirm completion',
      text: 'Finish quest?',
      cancelButton: 'No',
      acceptButton: 'Yes'
    };
    const dialogRef = this.dialog.open(DialogComponent, { data });

    dialogRef.afterClosed().subscribe(result => {
      // Do stuff after closing
    });
  }
}

DialogComponent 在我的component.module.ts 文件中被声明和添加为entryComponent，该文件从app.module.ts 路由到。我也尝试直接在后一个文件中添加它，但没有任何改变。我还添加了@import '~@angular/material/prebuilt-themes/deeppurple-amber.css' 到styles.scss。

我在控制台中注意到，包含对话框的元素实际上包含所有需要的元素，但正在隐藏它们，并且在手动显示时它们没有样式：

即使我得到了所有这些线索来解决我的问题，我也看不出我做错了什么。我来这里之前花了很多时间研究。

【问题讨论】：

你有没有在控制台中遇到任何错误
控制台没有错误，没有

标签： node.js angular typescript npm angular-material

【解决方案1】：

您只需将组件选择器更改为dialog 之外的任何内容。 Chrome 现在为 dialog 元素内置了样式，该元素隐藏了您的对话框内容。

参考：Why can't I see HTML 5 <dialog>?

【讨论】：