Angular 6使用同一文件中组件之间的传递变量
我有一个使用API工作的Angular 6应用程序。在我的应用程序中，我必须在Angular Material Dialog中显示一些传入的数据，因此对话框Component与我用来显示API数据的主要组件一起。
这是事情，我想将一些数据传输到Dialog组件，例如：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-jours-feries',
templateUrl: './show-dataponent.html',
styleUrls: ['./show-dataponent.scss']
})
export class ShowDataComponent {
public data: any;
// data here will get the incoming data from the API
}
@Component({
selector: 'dialogponent',
templateUrl: 'dialogponent.html',
styleUrls: ['./dialogponent.scss']
})
export class DialogComponent {
// I want to use data property in this component without duplicating functions and variables
}
这是我的原始代码：
import { Component, OnInit, Inject } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { ConfigurationService } from 'src/app/services/configuration.service';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-jours-feries',
templateUrl: './jours-feriesponent.html',
styleUrls: ['./jours-feriesponent.scss']
})
export class JoursFeriesComponent implements OnInit {
public displayedColumns: string[] = ['date', 'reserve', 'description', 'actions'];
public jourFeriesObjectHolder: any;
public description: any;
constructor(
private dialog: MatDialog,
private __ConfigurationService: ConfigurationService
) {
this.getJoursFeries();
}
/**
* Getting {{ Congés Annuels }} data from our service
*
*/
public getJoursFeries(){
this.__ConfigurationService.getJoursFeries().subscribe((data) => {
this.jourFeriesObjectHolder = data;
});
}
public getJoursFeriesDescription(){
this.__ConfigurationService.getJoursFeriesDesc().subscribe((data) => {
// this.jourFeries_IDHolder = data[0]._id;
// this.descExplicatifJourFer = data[0].description;
this.description = data[0].description;
});
}
openDialog() {
const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, { data: this.description });
dialogRef.afterClosed().subscribe(confirm => {
if(confirm){
// do something
}
});
}
ngOnInit() {
}
}
@Component({
selector: 'add-updateponent',
templateUrl: 'add-updateponent.html',
styleUrls: ['./add-updateponent.scss']
})
export class AddUpdateJourFerieComponent {
// Validate Jours Fériés
requiredDescriptionJoursFeries = new FormControl('', [
Validators.required
]);
requiredNameJoursFeries = new FormControl('', [
Validators.required
]);
requiredDateJoursFeries = new FormControl('', [
Validators.required
]);
requiredTextJoursFeries = new FormControl('', [
Validators.required
]);
matcher = new MyErrorStateMatcher();
/* Jour ferié */
public jourFerDate: string;
public isReservedHoliday: number = 0;
public descJourFer: string;
public descExplicatifJourFer: string;
public jourFeries_IDHolder: string;
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
console.log(data);
}
}
任何想法 ？
回答如下：let dialogRef = dialog.open(DialogComponent, {Data: { }})
角度material dialog的参考链接
Angular 6使用同一文件中组件之间的传递变量
我有一个使用API工作的Angular 6应用程序。在我的应用程序中，我必须在Angular Material Dialog中显示一些传入的数据，因此对话框Component与我用来显示API数据的主要组件一起。
这是事情，我想将一些数据传输到Dialog组件，例如：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-jours-feries',
templateUrl: './show-dataponent.html',
styleUrls: ['./show-dataponent.scss']
})
export class ShowDataComponent {
public data: any;
// data here will get the incoming data from the API
}
@Component({
selector: 'dialogponent',
templateUrl: 'dialogponent.html',
styleUrls: ['./dialogponent.scss']
})
export class DialogComponent {
// I want to use data property in this component without duplicating functions and variables
}
这是我的原始代码：
import { Component, OnInit, Inject } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { ConfigurationService } from 'src/app/services/configuration.service';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-jours-feries',
templateUrl: './jours-feriesponent.html',
styleUrls: ['./jours-feriesponent.scss']
})
export class JoursFeriesComponent implements OnInit {
public displayedColumns: string[] = ['date', 'reserve', 'description', 'actions'];
public jourFeriesObjectHolder: any;
public description: any;
constructor(
private dialog: MatDialog,
private __ConfigurationService: ConfigurationService
) {
this.getJoursFeries();
}
/**
* Getting {{ Congés Annuels }} data from our service
*
*/
public getJoursFeries(){
this.__ConfigurationService.getJoursFeries().subscribe((data) => {
this.jourFeriesObjectHolder = data;
});
}
public getJoursFeriesDescription(){
this.__ConfigurationService.getJoursFeriesDesc().subscribe((data) => {
// this.jourFeries_IDHolder = data[0]._id;
// this.descExplicatifJourFer = data[0].description;
this.description = data[0].description;
});
}
openDialog() {
const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, { data: this.description });
dialogRef.afterClosed().subscribe(confirm => {
if(confirm){
// do something
}
});
}
ngOnInit() {
}
}
@Component({
selector: 'add-updateponent',
templateUrl: 'add-updateponent.html',
styleUrls: ['./add-updateponent.scss']
})
export class AddUpdateJourFerieComponent {
// Validate Jours Fériés
requiredDescriptionJoursFeries = new FormControl('', [
Validators.required
]);
requiredNameJoursFeries = new FormControl('', [
Validators.required
]);
requiredDateJoursFeries = new FormControl('', [
Validators.required
]);
requiredTextJoursFeries = new FormControl('', [
Validators.required
]);
matcher = new MyErrorStateMatcher();
/* Jour ferié */
public jourFerDate: string;
public isReservedHoliday: number = 0;
public descJourFer: string;
public descExplicatifJourFer: string;
public jourFeries_IDHolder: string;
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
console.log(data);
}
}
任何想法 ？
回答如下：let dialogRef = dialog.open(DialogComponent, {Data: { }})
角度material dialog的参考链接