如何從組件到材質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