在角度 2 中显示从子组件到父组件的检查 ID

Question

如果某个项目是否根据子组件中的选择启用，我在父组件中相关时遇到了一些麻烦。

我正在通过路由器插座显示我的子内容。

整体视图：我有一个带有多个标题的侧菜单。单击标题后，将出现一个视图页面，其中有一个复选框，允许用户启用或禁用菜单标题项。

我想要的是当用户选中子组件中的框时 - 启用的标题旁边会出现一个复选标记(无需刷新页面 - 这是当前正在发生的事情(

父组件：

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的范围是用户从子视图 componenet 启用它后我希望出现的复选标记。

---

子组件：

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) => {
.....
});
}

子网页：

<input type="checkbox"
[checked]="menuItem?.isEnabled"(change)="onMenuItemValueChange(menuItem, $event.target.checked)">
<span class="text-body">title</span>

我有一种感觉，我不需要调用来获取子组件中的菜单项，我可以从父组件中获取它，但我不确定我是如何搞砸自己的。

Answer 1

你没有孩子/父母。最简单的方法是在服务中使用变量 如果你的服务你有一些喜欢

checkedItems:any[]=[]

如果您的标题

get checkedItems()
{
return yourservice.checkedItems;
}
<span *ngIf="checkedItems[i]" class="win-icon win-icon-CheckMark"></span>

在您的组件中，某处

yourservice.checkedItems[index]=true