以角度2显示从子组件到父组件的检查ID答案

【问题标题】：show checked id from child to parent component in angular 2以角度2显示从子组件到父组件的检查ID
【发布时间】：2018-12-08 10:47:03
【问题描述】：

如果某个项目已启用或未基于子组件中的选择，我在反映我的父组件时遇到了一些麻烦。

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

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

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

父组件：

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

【问题讨论】：

使用@Output 和EventEmitter
Pass data from child to parent component Angular2的可能重复
@mintquan 我忘了提到我将更新哪个......但我通过显示子组件所以我不相信输出真的会到达父组件

标签： javascript angular angular2-components

【解决方案1】：

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

checkedItems:any[]=[]

如果你的标题

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

在你的组件中，某处

yourservice.checkedItems[index]=true

【讨论】：