如果已根据子组件中的选择启用了项目，则在我的父组件中重新选择时遇到一些麻烦 .
我通过路由器插座显示我的孩子内容 .
总体观点：我有一个带有几个 Headers 的侧面菜单 . 单击 Headers 后，将出现一个视图页面，其中包含一个复选框，允许用户启用或禁用菜单 Headers 项 .
我想要的是当用户检查子组件中的框时 - 启用标头旁边会出现一个复选标记（无需刷新页面 - 这是当前发生的事情）
父组件：
public ngOnInit() {
this.getMenuHeadersList();
}
private getMenuHeadersList() {
this.service.getMenuItemList(this.id).subscribe(
(data: MenuItems[]) => {
if (data !== undefined) {
this.menuList= data;
}
},
(error: any) => {
.....
});
}
//for loop menuItem of menuList
<a id="menuId" class="refine-menu-collapse" [routerLink]="[...]">
<span *ngIf="menuItem.isEnabled" class="win-icon win-icon-CheckMark"></span>
<span class="refine-menu-subtitle">{{menuItem.name}}</span>
</a>
检查 menuItem.isEnabled 是否是我希望在用户从子视图组件启用后出现的复选标记的范围 .
子组件：
public ngOnInit() {
this.getMenuHeadersList();
}
private onMenuItemValueChange(menuItem: MenuItemType, checked: boolean) {
menuItem.isEnabled = checked;
this.saveMenuItemTypes(menuItem);// makes a service call and calls getMenuHeadersList.
}
private getMenuHeadersList() {
this.service.getMenuItemList(this.id).subscribe(
(data: MenuItems[]) => {
if (data !== undefined) {
this.menuList= data;
this.singleMenuItem = this.menuItems.find((value) => value.menuItem.id === this.menuId);
}
},
(error: any) => {
.....
});
}
儿童HTML：
<input type="checkbox"
[checked]="menuItem?.isEnabled"(change)="onMenuItemValueChange(menuItem, $event.target.checked)">
<span class="text-body">title</span>
我有这种感觉，我不需要调用来获取子组件中的menuItems，我可以从父母那里得到它，但我不知道我是如何弄乱自己的 .
1 回答
你没有孩子/父母 . 最简单的方法是在服务中使用变量如果您的服务有一些喜欢的话
如果你的 Headers
在您的组件中，某处