角2 - divでクリックしてオブジェクトを別のコンポーネントに渡し、別のコンポーネントがそのオブジェクトを使用してコールサービスを呼び出す

Question

親（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> 

チャイルドコンポーネント：

@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 
} 

Answer 1

私のために働いた。問題はCSSだった。ポップアップの感じを得るために私自身のCSSクラスを作成しました

Answer 2

あなたが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 
       }); 
} 

もここで詳細clickを参照してください。このヘルプを行います！

Answer 3

この@Input [詳細コンポーネント]でイベントエミッタを使用する必要があります。値は製品ページから渡されます。 これにより、製品が詳細ページにリンクされ、詳細ページが入力を受け取り、ngOnInitで詳細をロードするServiceメソッドを呼び出します。

これはすべて、あなたが望むなら角度材料を使って、私たちはあなたの問題を解決します。

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

あなたはplunkerを持っているか、この問題は更新してくださいためのいくつかのことを試してみました場合。