如何将服务变量传递到 Angular Material 对话框中?
How can I pass a service variable into an Angular Material dialog?
对于mdDialog,如何传入变量?具体来说,如何在对话框组件中注入一个Angular服务?
这是我的做法。
pizza.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class PizzaService {
getTopping(): string {
return "Mushrooms"
}
}
pizzaDialog.component.ts
import { Component } from '@angular/core';
import { MdDialogRef} from '@angular/material';
import {PizzaService} from './pizza.service';
@Component({
selector: 'pizza-dialog',
template: `{{pizzaTopping}}
<button type="button" (click)="dialogRef.close('yes')">Yes</button>
<button type="button" (click)="dialogRef.close('no')">No</button>
`,
providers: [PizzaService]
})
export class PizzaDialog {
pizzaTopping: string;
constructor(public dialogRef: MdDialogRef<PizzaDialog>, private pizzaService: PizzaService) { };
ngOnInit(): void {
this.pizzaTopping = this.pizzaService.getTopping()
}
}
为了传递变量,您可以从 MdDialog.open() 方法调用返回的 MdDialogRef 实例中获取在对话框中打开的组件的实例。
dialogRef = this.dialog.open(PizzaDialog, config)
dialogRef.componentInstance.<property_name>
来自 github material2 docs angular material doc
的改良披萨
@Component({
selector: 'pizza-component',
template: `
<button type="button" (click)="openDialog()">Open dialog</button>
`
})
export class PizzaComponent {
constructor(public dialog: MdDialog) { }
openDialog() {
let config = new MdDialogConfig();
let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config);
dialogRef.componentInstance.name = "Ham and Pineapple";
dialogRef.componentInstance.size = "Large";
}
}
@Component({
selector: 'pizza-dialog',
template: `
<h2>{{name}}</h2>
<p>Size: {{size}}</p>
<button type="button" (click)="dialogRef.close('yes')">Yes</button>
<button type="button" (click)="dialogRef.close('no')">No</button>
`
})
export class PizzaDialog {
name:string;
size:string;
constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}
Material2 beta.2
dialog.open()
函数采用第二个参数 config
(MdDialogConfig),您可以在其中指定任何 data
对象。
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
然后您可以从正在用于您的对话框的组件中检索此对象 window。
export class YourDialogComponent {
constructor(public dialogRef: MdDialogRef<YourComponent>) {
console.log('data', this.dialogRef.config.data);
}
}
更新:beta.3
以上答案适用于 2.0.0-beta.2
版本的 Material2。如果您使用的是 2.0.0-beta.3
,config
属性 已从 MdDialogRef
中删除。您可以改为使用打开组件的 MD_DIALOG_DATA
注入该值。
新建导入语句
import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
打开对话
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
从 DialogRef
组件检索数据
export class YourDialogComponent {
constructor(
public dialogRef: MdDialogRef<YourDialogComponent>,
@Inject(MD_DIALOG_DATA) public data: any) {
console.log('data', this.data);
}
}
来自 https://material.angular.io/components/dialog/overview
上的官方文档
与对话框组件共享数据。
如果您想与对话框共享数据,可以使用数据选项将信息传递给对话框组件。
let dialogRef = dialog.open(YourDialog, {
data: 'your data',
});
要访问对话框组件中的数据,您必须使用 MD_DIALOG_DATA 注入令牌:
import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'your-dialog',
template: 'passed in {{ data }}',
})
export class YourDialog {
constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}
提供更新的答案以适应从 'Md' 到 'Mat' 的更新:
- 这假设您已经成功实现了一个对话框,现在只是想添加一个输入
- 当您遇到 @angular/material 没有导出成员 'MD_DIALOG_DATA'
的问题时,这是解决方案
要用数据打开对话框,传入一个数据对象:
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
要在您的对话框中检索该数据:
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export class YourDialogComponent {
constructor(
public dialogRef: MatDialogRef<YourDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
console.log('data passed in is:', this.data);
}
}
对于mdDialog,如何传入变量?具体来说,如何在对话框组件中注入一个Angular服务?
这是我的做法。
pizza.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class PizzaService {
getTopping(): string {
return "Mushrooms"
}
}
pizzaDialog.component.ts
import { Component } from '@angular/core';
import { MdDialogRef} from '@angular/material';
import {PizzaService} from './pizza.service';
@Component({
selector: 'pizza-dialog',
template: `{{pizzaTopping}}
<button type="button" (click)="dialogRef.close('yes')">Yes</button>
<button type="button" (click)="dialogRef.close('no')">No</button>
`,
providers: [PizzaService]
})
export class PizzaDialog {
pizzaTopping: string;
constructor(public dialogRef: MdDialogRef<PizzaDialog>, private pizzaService: PizzaService) { };
ngOnInit(): void {
this.pizzaTopping = this.pizzaService.getTopping()
}
}
为了传递变量,您可以从 MdDialog.open() 方法调用返回的 MdDialogRef 实例中获取在对话框中打开的组件的实例。
dialogRef = this.dialog.open(PizzaDialog, config)
dialogRef.componentInstance.<property_name>
来自 github material2 docs angular material doc
@Component({
selector: 'pizza-component',
template: `
<button type="button" (click)="openDialog()">Open dialog</button>
`
})
export class PizzaComponent {
constructor(public dialog: MdDialog) { }
openDialog() {
let config = new MdDialogConfig();
let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config);
dialogRef.componentInstance.name = "Ham and Pineapple";
dialogRef.componentInstance.size = "Large";
}
}
@Component({
selector: 'pizza-dialog',
template: `
<h2>{{name}}</h2>
<p>Size: {{size}}</p>
<button type="button" (click)="dialogRef.close('yes')">Yes</button>
<button type="button" (click)="dialogRef.close('no')">No</button>
`
})
export class PizzaDialog {
name:string;
size:string;
constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}
Material2 beta.2
dialog.open()
函数采用第二个参数 config
(MdDialogConfig),您可以在其中指定任何 data
对象。
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
然后您可以从正在用于您的对话框的组件中检索此对象 window。
export class YourDialogComponent {
constructor(public dialogRef: MdDialogRef<YourComponent>) {
console.log('data', this.dialogRef.config.data);
}
}
更新:beta.3
以上答案适用于 2.0.0-beta.2
版本的 Material2。如果您使用的是 2.0.0-beta.3
,config
属性 已从 MdDialogRef
中删除。您可以改为使用打开组件的 MD_DIALOG_DATA
注入该值。
新建导入语句
import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';
打开对话
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
从 DialogRef
组件检索数据
export class YourDialogComponent {
constructor(
public dialogRef: MdDialogRef<YourDialogComponent>,
@Inject(MD_DIALOG_DATA) public data: any) {
console.log('data', this.data);
}
}
来自 https://material.angular.io/components/dialog/overview
上的官方文档与对话框组件共享数据。
如果您想与对话框共享数据,可以使用数据选项将信息传递给对话框组件。
let dialogRef = dialog.open(YourDialog, {
data: 'your data',
});
要访问对话框组件中的数据,您必须使用 MD_DIALOG_DATA 注入令牌:
import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'your-dialog',
template: 'passed in {{ data }}',
})
export class YourDialog {
constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}
提供更新的答案以适应从 'Md' 到 'Mat' 的更新:
- 这假设您已经成功实现了一个对话框,现在只是想添加一个输入
- 当您遇到 @angular/material 没有导出成员 'MD_DIALOG_DATA' 的问题时,这是解决方案
要用数据打开对话框,传入一个数据对象:
this.dialog.open(YourComponent, {
data: {
anyProperty: "myValue"
}
});
要在您的对话框中检索该数据:
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export class YourDialogComponent {
constructor(
public dialogRef: MatDialogRef<YourDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
console.log('data passed in is:', this.data);
}
}