angular6 - 在angular6项目中没有弹出窗口

Question

我在angular6做项目。我放了“openModal”按钮。单击该按钮后，需要显示弹出窗口。但我没有弹出。但是假设在弹出窗口上显示的数据将显示在同一页面上。我没有得到我做错的地方。请任何人帮助我找到我做错的地方。在这里，我附上了我得到的输出截图。 https://imgur.com/Qjiy7jy

这是我的代码

app.component.html

<button (click)="openModal()">Open Dialog</button>

app.component.ts

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(public dialog: MatDialog) { }

  openModal() {
    console.log("calling");
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {
        id: 1,
        title: 'Angular For Beginners'
    };

    const dialogRef = this.dialog.open(MyDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      alert("response: " + result)
    });
  }
}

我的-dialog.component.html

   <p>
      my-dialog works!
    </p>

我的对话框.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
import {MatSelectModule} from '@angular/material/select';
import {FormControl, Validators} from '@angular/forms';
import {MatInputModule} from '@angular/material'

export interface Staff {
  name: string;

}


@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent  {


   modalTitle: string;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.modalTitle = data.title;
    console.log(data)
   }

  staffControl = new FormControl('', [Validators.required]);
  selectFormControl = new FormControl('', Validators.required);

}

标签： angular6

Answer 1

添加你的模块入口组件
：[yourdailogComponent]

并在你的 style.css 中导入 css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

  openHashTagDialog() {
    const dialogRef = this.dialog.open(AddHashTagdialogComponent, {
      data: '',
      width: '400px'
    });
    dialogRef.afterClosed().subscribe(result => {
      this.fetchHashTagsList();
    });
  }