angular 2 - при щелчке div передать объект другому компоненту, и другой компонент использует этот объект для вызова службы отдыха

В родительском (ParentComponent) загружает все родительские данные методом onInit. Теперь, если я нажимаю на отдельного родителя, он запускает дочернее представление, передавая parentId из ParentComponent в ParentDetailComponent, а ParentDetailComponent вызывает ParentDetailService и получает объект IParent. Теперь я попытался с помощью * ngIf показать шаблон ParentDetailComponent, но он не запускается. как мне вызвать дочернее представление?

Дочерний шаблон:

<div *ngIf="DetailIsVisible" id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
            <h4 class="modal-title" id="myModalLabel">Parent Detail</h4>
        </div>
        <div class="modal-body">
            <div *ngIf="parent">
                <h2>{{parent.name}} details!</h2>
                <div><label>id: </label>{{parent.Id}}</div>
                <div>
                    <label>name: </label>
                    <label>{{parent.name}}</label>
                </div>
                <div>
                    <label>Education: </label>
                    <label>{{parent.education}}</label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="hideDetail()">Close</button>
        </div>
    </div>
</div>

Child Component:

@Component({
selector: 'app-parent-detail',
templateUrl: './child.component.html',
providers: [ParentDetailService]
})
export class ParentDetailComponent{
parentId: string;
parent: IParent;
public DetailIsVisible: boolean;

constructor(private _parentDetailService: ParentDetailService) {
}

show(parentId: string) {
    this.serviceDetail = serviceId;
 this._parentDetailService.getParentServiceDetail(this.parentId).subscribe(parent => {
        this.parent = parent[0];
        console.log(this.parent);
    });

}

hideDetail() {
    this.DetailIsVisible = false;
}

}

Родительский шаблон:

div class="container">
<div class="row">
    <div class="col-sm-4" *ngFor="let parent of parents" (click)="selectedServiceDetail(parent.Id)" data-target="#detailModal">
        <div class="panel panel-primary" >
            <div class="panel-heading">{{parent.Id}}</div>
            <div class="panel-body"><img [src]="parent.thumbnailpath"
                                         class="img-responsive" style="width:100%; height: 200px" [title] = 'parent.name' alt="Image"></div>
            <div class="panel-footer">{{parent.name}}</div>
        </div>
    </div>
</div>


Родительский компонент:

 @Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
providers: [ParentDetailService]
 })
 export class ParentComponent implements OnInit {
/**all rest api and assign to array of catalog*/

     public parents: IParent[];
     public DetailIsVisible: boolean;
     @ViewChild(ParentDetailComponent) detailModal: ParentDetailComponent;

constructor(private _parentService: ParentService) {
}

ngOnInit(): void {
    this._parentService.getParents()
        .subscribe(
            parents => this.parents = parents
        );
    this.detailModal.DetailIsVisible = false;
}

    public selectedServiceDetail(parentId): void {

    this.detailModal.DetailIsVisible = true;
    this.detailModal.show(parentId); ---> this triggers ChildComponent method to fetch parent detail service
}

angular angular2-services angular2-components
person DaenKhaleesi    schedule 30.05.2017    source источник
comment
вы можете использовать @Output eventemitter в andgular2, вы можете найти помощь в ответе на этот вопрос stackoverflow.com/questions/36076700/   -  person Ketan Akbari    schedule 30.05.2017

Ответы (3)


arrow_upward
0
arrow_downward

вы можете использовать mdDialog.

 openNewDetailModal(productObj: any): void {
            const dialogRef = this.dialog.open(DetailsComponent);
            dialogRef.componentInstance.album = this.selectedAlbumObj;
            dialogRef.afterClosed().subscribe(
                (result: boolean) => {
                   // do anything after close modal
                });
}

также см. дополнительные сведения здесь. нажмите помогает ли это!

person Shailesh Ladumor    schedule 30.05.2017

arrow_upward
0
arrow_downward

Вы должны использовать эмиттеры событий для этого @Input [в вашем компоненте детали], значение будет передано со страницы продукта. Это свяжет продукт с их страницей сведений, а затем страница сведений примет входные данные и в своем ngOnInit вызовет метод Service, который загрузит детали.

Все это должно быть выполнено в Modal i: e с использованием материала angular, если хотите, это решит вашу проблему.

https://material.angular.io/components/component/dialog

Если у вас есть плункер или вы пытались решить эту проблему, обновите его.

person Rahul Singh    schedule 30.05.2017
comment
Я обновил свой вопрос, не могли бы вы изучить его сейчас? Возможно, будет более ясно, где я застрял прямо сейчас. - person DaenKhaleesi; 30.05.2017

arrow_upward
0
arrow_downward

выше решение сработало для меня. Проблема была в CSS. Я создал свой собственный класс css, чтобы отображалось всплывающее окно

person DaenKhaleesi    schedule 30.05.2017