angular 2 - 在 div 上单击,将对象传递给另一个组件,另一个组件使用该对象调用 rest 服务
angular 2 - on div click, pass object to another component and another component uses that object to call rest service
在父组件(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">× </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
}
您可以使用 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
});
}
also see more details here click does this help!
您必须为此 @Input 使用事件发射器 [在您的详细信息组件中] 值将从产品页面传递。
这将 link 产品到他们的详细信息页面,然后详细信息页面将接受输入并在其 ngOnInit 上调用将加载详细信息的服务方法。
如果您愿意,所有这些都必须在模式 i:e 中使用 angular material 完成,这将解决您的问题。
https://material.angular.io/components/component/dialog
如果您有一个 plunker 或尝试过一些解决此问题的方法,请更新。
以上解决方案对我有用。问题是 CSS。我创建了自己的 css class 以获得弹出窗口的感觉
在父组件(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">× </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
}
您可以使用 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
});
}
also see more details here click does this help!
您必须为此 @Input 使用事件发射器 [在您的详细信息组件中] 值将从产品页面传递。 这将 link 产品到他们的详细信息页面,然后详细信息页面将接受输入并在其 ngOnInit 上调用将加载详细信息的服务方法。
如果您愿意,所有这些都必须在模式 i:e 中使用 angular material 完成,这将解决您的问题。
https://material.angular.io/components/component/dialog
如果您有一个 plunker 或尝试过一些解决此问题的方法,请更新。
以上解决方案对我有用。问题是 CSS。我创建了自己的 css class 以获得弹出窗口的感觉