如何从组件到材质2对话框中获取一些动态值

Question

在homeComponent.ts中显示数据库中的一些数据。 在每个显示的项目中，我都提供了openDailog（）的按钮。

我现在想要做的是获取material2对话框中点击项目的数据值。

这里是我的homeComponent

@Component({ 
    selector: 'app-homecomponent', 
    template: ` 
     <app-homecard 
     *ngFor="let item of items" 
     [item]="item" 
     (checked)="onItemChecked($event)" 
      > 
     </app-homecard> 
    ` 
}) 
export class HomeComponent implements OnInit { 
ngOnInit() { 
    this.statusService.getStatus() 
    .subscribe(items => { this.items = items;}); 
    } 

} 

这里是哪里的对话是从实施homecard。

@Component({ 
     selector: 'app-homecard', 
     template: ` 
     <md-card> 
      <button md-button (click)="openDialog()"><i class="fa fa-share-alt-square fa-1x" aria-hidden="true"></i></button> 
     </md-card> 
     ` 
    }) 
    export class HomeCard implements OnInit { 
    @Input() item = {}; 
    @Output() checked = new EventEmitter(); 
     constructor(
     private _dialog: MdDialog 
     ) { } 

    openDialog() { 
     let dialogRef = this._dialog.open(DialogShare); 
     } 
    } 

//Dialog component! 
    @Component({ 
     template: ` 
     <app-sharecard></app-sharecard> 
     `, 
    }) 
    export class DialogShare { 
     constructor(@Optional() public dialogRef: MdDialogRef<DialogShare>) { } 
    } 

这里就是我想要得到像sharecard {{item.id}}

@Component({ 
    selector: 'app-sharecard', 
    template: ` 
    <div class="shareform"> 
    {{item.id}} 
    {{item.name}} 
    </div> 
    ` 
}) 
export class ShareCard implements OnInit { 
    ngOnInit() { 

    } 
    close() { 
     this._dialog.closeAll(); 
    } 
} 

我怎样才能打开项目数据的项目值sharecard？

Answer 1

首先item输入添加到您的ShareCard组件

export class ShareCard implements OnInit { 
    @Input() item: any; 
} 

然后修改DialogShare像：

@Component({ 
    template: `<app-sharecard [item]="item"></app-sharecard>` 
}) 
export class DialogShare { 
    item: any; 
    ... 
} 

最后通过item当你打开对话框：

export class HomeCard { 
    ... 
    openDialog() { 
    let dialogRef = this._dialog.open(DialogShare); 
    dialogRef.componentInstance.item = this.item; 
    } 
} 

取一看Plunker Example

又见

• Working example of Angular 2.0 Material MdDialog with Angular 2.0