Angular2 md對話框與選定的選項

Question

我有一個項目列表的項目。這個想法是，當我選擇一個項目並點擊它時，它應該在模態對話窗口中打開，並帶有這個項目的詳細信息。

我實現了onSelected函數。該功能選擇該項目並將其顯示在列表下方，但不在對話框內。 取而代之的是，當我的對話框打開時，它會顯示一個空的對話窗口，只有一個關閉按鈕，沒有任何東西。

我不是很熟悉的角度，並請您幫助我。 我已經失去了很多時間，不明白如何使它一起工作。

請參閱下面的代碼片段：

我BikinisComponen

<app-bikini-list (bikiniSelected)="selectedBikini= $event"></app-bikini-list> 
    <app-bikini-detail [selectedBikini]='selectedBikini'></app-bikini-detail> 
    export class BikinisComponent implements OnInit { 
selectedBikini:Bikini; 
    constructor() { } 

    ngOnInit() { 
    }  
} 

下一頁BikiniListComponent

<div class ="flex-header"> 
    <h1 class= 'page-title'> Bikini</h1> 
</div> 

<div> 
<ul class="flex-container"> 

<app-bikini-item *ngFor="let bikini of bikinis" [bikini]='bikini' 
class="flex-item" (click)="onSelected(bikini)"> </app-bikini-item> 

</ul> 
</div> 
export class BikiniListComponent implements OnInit { 
    bikinis: Bikini[] = []; 

    @Output() bikiniSelected = new EventEmitter<Bikini>(); 

    constructor(private suitsService: SuitsService, public dialog: MdDialog,) { } 
    public result; 

    public openDialog() { 
    let dialogRef = this.dialog.open(BikiniDetailComponent); 
    dialogRef.afterClosed(); 
    } 
    ngOnInit() { 
    this.bikinis = this.suitsService.getBikinis(); 
    } 

    onSelected(bikini: Bikini) { 
    this.bikiniSelected.emit(bikini); 
    } 

} 

下一頁比基尼項目

<md-card class="example-card"> 

    <img md-card-image src={{bikini.imagePath}}> 
    <md-card-content> 
    <h3>{{bikini.id}} {{bikini.name}}</h3> 
    <h4>Color: {{bikini.color}}</h4> 
     <p class='text-content'>{{bikini.description}}</p> 
    </md-card-content> 

</md-card> 
export class BikiniItemComponent { 

@Input() bikini:Bikini; 
bikiniId:number; 
selectedBikini:Bikini; 

    constructor(public dialog: MdDialog) {} 
public result; 

public openDialog() { 
    let dialogRef = this.dialog.open(BikiniDetailComponent); 
    dialogRef.afterClosed(); 
    } 


} 

和比基尼挪威AIL

<div md class="row"> 
    <div class="col-xs-12"> 
    <h1 md-dialog-title> {{selectedBikini?.name}}</h1> 
    <h4>{{selectedBikini?.color}}</h4> 
    <div md-dialog-content> 
     <img src="{{selectedBikini?.imagePath}}" alt="" class="img-responsive"> 

     <p>{{selectedBikini?.description}}</p> 
    </div> 
    <div md-dialog-actions> 
     <a md-fab (click)="dialogRef.close()"><i class="material-icons">close</i></a> 
    </div> 
    </div> 
</div> 

export class BikiniDetailComponent implements OnInit { 
@Input() public selectedBikini:Bikini; 

    constructor(public dialog: MdDialog) { } 

    ngOnInit() { 
    } 

public result; 

public openDialog() { 
    let dialogRef = this.dialog.open(BikiniDetailComponent); 
    dialogRef.afterClosed(); 
    } 
} 

所有從我的服務被稱爲信息（其中正常工作）

Answer 1

據我瞭解，你要選擇的項目傳遞給對話框（BikiniDetailComponent），並顯示在對話框上，所以這個你可以使用如下服務。

步驟1 - 創建服務

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject' 

import { Bikini } from 'path/to/bikini/model'; 


@Injectable() 
export class SelectedBikiniEventService { 
    private defaultBikini:Bikini = <Bikini> {} ; 

    private editSelectedBikini:BehaviorSubject<Bikini> = new BehaviorSubject(this.defaultBikini); 

    public editItem = this.editSelectedBikini 
    .asObservable() 
    .distinctUntilChanged(); 

    changeItem(bikini: Bikini) { 
    this.editSelectedBikini.next(bikini); 
    } 

} 

步驟 - 2代替發光，當比基尼項點擊的事件的，使用該服務的方法和保存所選比基尼項。

的BikiniListComponent

constructor(private eventService: SelectedBikiniEventService) {} 

呼叫時，項目被點擊

showSelectedItem(selecteBikini) { 
    this.eventService.changeItem(selecteBikini); 
    // open the dialog here 
} 

步驟此方法內 - 3上的對話框組分（BikiniDetailComponent）注入服務如上和訂閱上的變化服務的數據

constructor(private eventService: SelectedBikiniEventService) { 
    this.eventService.editItem 
     .subscribe(data => { 
     this.bikini = data; 
     }); 
}