如何在角度2材质中添加对话框组件的输入?

时间:2017-03-26 16:06:38

标签: angular angular-material

长话短说,我有自定义对话框组件,它需要三个输入来显示数据。显示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;
      });
    }

  }

};

0 个答案:

没有答案