javascript - 在 Angular 2 中显示从子组件到父组件的已检查 id

Question

如果根据子组件中所做的选择启用或未启用某个项目，我在反射(reflect)父组件中时遇到一些麻烦。

我正在通过路由器导出显示我的子内容。

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

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

父组件:

 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是否是我希望在用户从 subview 组件中启用它后出现的复选标记的跨度。

<小时/>

子组件:

 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，我可以从父组件中获取它，但我不确定我自己是如何搞砸的。

Answer 1

您没有 child / parent 。最简单的方法是在服务中使用变量如果您的服务有类似

checkedItems:any[]=[]

如果你的标题

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

在你的组件中的某个地方

yourservice.checkedItems[index]=true