angular - 如何使用角度中的按钮单击事件将单个属性从父组件发送到子组件
问题描述
您好我想将单个属性(groupId)从父组件传递给子组件,这里我的子组件是 ngx-bootstrap 模态的,所以有什么解决方案。基本上我想创建组帖子,其中帖子对象还包含groupId,并且groupId在父组件中可用
父组件
group.component.ts
bsModalRef: BsModalRef;
group: any = {};
constructor(
private router: Router,
private route: ActivatedRoute,
private alertify: AlertifyService,
private groupService: GroupService,
private modalService: BsModalService
) { }
ngOnInit() {
const id = +this.route.snapshot.paramMap.get('id');
if (id) {
this.groupService.getGroup(id)
.subscribe(group => this.group = group);
}
}
openModalWithComponent() {
const initialState = {
title: 'Add new post'
};
this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
group.component.html
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary btn-block">
<button class="btn btn-primary fa fa-plus" (click)="openModalWithComponent()">Add
Post</button>
</a>
</div>
<div class="col-md-3">
<a class="btn btn-success btn-block" data-toggle="modal" data-target="#addCategoryModal">
<i class="fa fa-plus"></i> Add Category
</a>
</div>
<div class="col-md-3">
<a class="btn btn-warning btn-block" data-toggle="modal" data-target="#addUserModal">
<i class="fa fa-plus"></i> Add User
</a>
</div>
</div>
</div>
子组件
这里的子组件基本上是 ngx-bootrap 模态
post-modal.component.ts
title: string;
closeBtnName: string;
post: any = {};
postCaterogies;
constructor(
public bsModalRef: BsModalRef,
private postService: PostService
) { }
ngOnInit() {
this.postService.getPostCategories()
.subscribe(pCategories => this.postCaterogies = pCategories);
}
submit() {
this.postService.createPost(this.post)
.subscribe(post => {
console.log(post);
})
this.bsModalRef.hide();
}
解决方案
group.component.ts
bsModalRef: BsModalRef;
group: any = {};
constructor(
private router: Router,
private route: ActivatedRoute,
private alertify: AlertifyService,
private groupService: GroupService,
private modalService: BsModalService
) { }
ngOnInit() {
const id = +this.route.snapshot.paramMap.get('id');
if (id) {
this.groupService.getGroup(id)
.subscribe(group => this.group = group);
}
}
openModalWithComponent() {
const id = +this.route.snapshot.paramMap.get('id');
const initialState = {
title: 'Add new post',
groupId: id
};
this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
post-modal.component.ts
title: string;
groupId: number;
closeBtnName: string;
post: any = {};
postCaterogies;
constructor(
public bsModalRef: BsModalRef,
private postService: PostService) { }
ngOnInit() {
this.postService.getPostCategories()
.subscribe(pCategories => this.postCaterogies = pCategories);
}
submit() {
this.postService.createPost(this.post)
.subscribe(post => {
console.log(post);
})
this.bsModalRef.hide();
}
推荐阅读
- javascript - 如何过滤数组中的最后一天?
- javascript - 使用 Angular 在 MxGraph 上覆盖 graphHandlerMouseUp 时的无限循环
- hex - 如何理解“Mifare classic 1k”的内容?
- unix - fslmaths 减法函数给出错误:找不到输出
- excel - VBA根据单元格值乘以另一个工作表中的单元格
- fortran - gfortran 中带有字符的数组边界警告
- java - 如何使用 1 个 Spring Batch 作业来处理多个请求
- javascript - window.print() 不仅提供选定的选项
- angular - 如何在使用 Angular 8 上传到服务器端之前加密图像?
- javascript - 如何通过 document.getElementById inAngular 更改显示