带有选定选项的Angular2 md-Dialog

Question

我有一个项目列表。这个想法是，当我选择一个项目并单击它时，它应该在带有该项目详细信息的模态对话框窗口中打开。

我实现了 onSelected 函数。此函数选择项目并将其显示在列表下，但不在对话框内。 相反，当我的对话框打开时，它会显示带有一个关闭按钮且没有任何内容的空对话窗口。

我对 Angular 不是很熟悉，请您帮助我。 我浪费了很多时间，不知道如何让它一起工作。

请看下面的代码sn-p：

我有比基尼组件

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

下一个比基尼列表组件

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

从我的服务调用的所有信息（正常工作）

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

} 

step - 2 不是在比基尼项目被点击时发出事件，而是使用此服务方法并保存选定的比基尼项目。

在 BikiniListComponent 内部

constructor(private eventService: SelectedBikiniEventService) {}

当项目被点击时调用这个方法

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

对话框组件（BikiniDetailComponent）上的第3步如上注入服务并订阅服务数据的更改

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