Angular2 md-選択したオプション付きダイアログ

Question

私はアイテムのリストを持つプロジェクトを持っています。アイデアは、アイテムを1つ選択してクリックすると、このアイテムの詳細を持つモーダルダイアログウィンドウで開きます。

私はonSelected関数を実装しました。この関数は、項目を選択してリストの下に表示しますが、ダイアログ内には表示しません。 代わりに、私のダイアログが開いているときには、何もせずに1つの閉じるボタンがある空のダイアログウィンドウが表示されます。

私はAngularには慣れていません。私を助けてください。 私は多大な時間を浪費しており、一緒に働かせる方法を理解していません。

以下のコードを参照してください：

を私が持っている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(); 
    } 


} 

そしてビキニデット

<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(); 
    } 
} 

AIL（正しく動作）私のサービスから呼び出されたすべての情報

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代わりビキニ項目がクリックされたイベントを放出する、このサービス方法を使用して、選択されたビキニアイテムを保存します。ダイアログコンポーネント（BikiniDetailComponent）に3以上のようにサービスを注入し、上の変更をサブスクライブ - BikiniListComponent

constructor(private eventService: SelectedBikiniEventService) {} 

コールこの方法アイテムが

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

ステップをクリックしたときに内部

サービスのデータ

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