node.js - Angular Material Dialog 隐藏元素

问题描述

我想在 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-file 中的 entryComponent，该文件被路由到 from app.module.ts。我也尝试直接在后一个文件中添加它，但没有任何改变。我也添加@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'到styles.scss.

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

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

标签： node.jsangulartypescriptnpmangular-material

node.js - Angular Material Dialog 隐藏元素

问题描述

解决方案

推荐阅读