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


} 

그리고 비키니 DET 괴롭히다

<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 대신 비키니 항목이 클릭 이벤트를 방출이 서비스 방법을 사용하여 선택된 비키니 항목을 저장한다. 3 대화 성분 (BikiniDetailComponent)에 상기와 같이 서비스를 주입하고에서 변경 등록 - 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; 
     }); 
}