长话短说,我有自定义对话框组件,它需要三个输入来显示数据。显示here的示例仅使用静态组件并注入父组件。我想知道是否有我可以将输入传递给除传统方式之外的组件。 我的全部观点是,我不想创建10个具有相同结构的组件,而不是创建一个采用不同值输入的组件
这是我正在谈论的组件:
import { Model } from '../models/modal';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
export interface ImgTypes{
bar?:string;
dot?:string;
line?:string;
}
export interface Images{
linear?: ImgTypes;
ridge?: ImgTypes;
ridgeCv?: ImgTypes;
lasso?: ImgTypes;
lassoCv?: ImgTypes;
}
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
})
export class DialogComponent {
images: Images;
calculatedModal;
variables;
constructor(public dialogRef: MdDialogRef<DialogComponent>) {
}
}
@Component({
selector: 'app-view-modal',
templateUrl: './view-modal.component.html',
styleUrls: ['./view-modal.component.css']
})
export class ViewModalComponent implements OnInit {
@Input() calculatedModal;
@Input() options;
@Input() images: Images;
dialogRef: MdDialogRef<DialogComponent>;
model: Model = {
AdmitSource: 0, AdmitUnit: 0, DischargeDisposition: 0, icuOrder: 0, PrimaryInsurance: 0,
age: 0, generalCareOrder: 0, stepdownOrder: 0, isoResult: 0
};
variables = [
'Admit_Source',
'Primary_Insurance',
'Discharge_Disposition',
'Admit_Unit',
'Bed_Category',
'iso_result',
'icu_order',
'stepdown_order',
'age'];
ngOnInit() {
}
constructor(public dialog: MdDialog, public viewContainerRef: ViewContainerRef) {
}
openDialog() {
let config = new MdDialogConfig();
config.viewContainerRef = this.viewContainerRef;
if (this.calculatedModal && this.images) {
this.dialogRef = this.dialog.open(DialogComponent, config);
this.dialogRef.componentInstance.images = this.images ;
this.dialogRef.componentInstance.calculatedModal = this.calculatedModal ;
this.dialogRef.componentInstance.variables = this.variables;
this.dialogRef.afterClosed().subscribe(result => {
this.dialogRef = null;
});
}
}
};