typescript 角度对话框打开不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48846171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular dialog open is not working
提问by ChinnaR
I have just started learning Angular 5 and I just need to open a dialog box on a button click. Application is unable to build and the error I am coming up is 'error ts2339 property dialog does not exist on type Dashboardcomponent' I have then installed angular material and cdk. It's still coming up with the same error when compiling. And the on the html page(localhost:4200), the error I am getting is 'Cannot read property 'open' of undefined'. How can I get the dialog and open working on angular?
我刚刚开始学习 Angular 5，我只需要单击按钮打开一个对话框。应用程序无法构建，我出现的错误是“类型仪表板组件上不存在错误 ts2339 属性对话框”，然后我安装了角材料和 cdk。编译时仍然出现相同的错误。而在 html 页面（本地主机：4200）上，我得到的错误是“无法读取未定义的属性‘打开’”。如何获得对话框并打开角度工作？
typscript:
打字稿：
import { Component, OnInit } from '@angular/core';
import { WebapiService } from '../providers/webapi.service';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor(private webApi: WebapiService) { }
ngOnInit() {
}
openServerDialog() {
const serverDialogRef = this.dialog.open(ServerDialogComponent, {
width: '250px',
data: { serverlist: this.webApi.getServerList() }
});
}
}
html:
html：
<div class="main-content">
<div class="container-fluid">
<button mat-fab color="warning" (click)="openServerDialog()">open</button>
</div>
</div>
回答by pzaenger
You need to create a dialog within your constructor, without this.dialog.open(...)results in Cannot read property 'open' of undefined:
您需要在构造函数中创建一个对话框，而不会this.dialog.open(...)导致无法读取未定义的属性“打开”：
constructor(public dialog: MatDialog, private webApi: WebapiService) {
}
回答by Kasunjith Bimal
First import MatDialogModule in AppModule
首先在 AppModule 中导入 MatDialogModule
import {MatDialogModule} from '@angular/material/dialog';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTml File
HTML文件
<button mat-raised-button (click)="openServerDialog()">Pick one</button>
TS file
TS文件
import { WebapiService } from '../providers/webapi.service';
import {Component, Inject,OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { ServerDialogComponent } from '../server-dialog/server-dialog.component';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor(public dialog: MatDialog,private webApi: WebapiService) { }
ngOnInit() {
}
openServerDialog() {
let serverDialogRef = this.dialog.open(ServerDialogComponent, {
width: '250px',
data: { serverlist: this.webApi.getServerList() }
});
}
}
ServerDialogComponent ts file
ServerDialogComponent ts 文件
@Component({
selector: 'server_dialog_component ',
templateUrl: 'server_dialog_component.html',
})
export class ServerDialogComponent {
constructor(
public dialogRef: MatDialogRef<ServerDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
