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