показать проверенный идентификатор от дочернего к родительскому компоненту в угловых 2 - PullRequest
Новая
       8

показать проверенный идентификатор от дочернего к родительскому компоненту в угловых 2

0 голосов
/ 29 июня 2018

Я столкнулся с некоторой проблемой при повторном отражении в моем родительском компоненте, если элемент был включен или нет на основе выбора, сделанного в дочернем компоненте.

Я показываю свой дочерний контент через роутер.

Общий вид: у меня есть боковое меню с несколькими заголовками. При нажатии на заголовок появится страница просмотра, и внутри нее появится флажок, позволяющий пользователю включить или отключить элемент заголовка меню.

Я хочу, чтобы пользователь установил флажок в дочернем компоненте - чтобы рядом с включенным заголовком появилась галочка (без необходимости обновлять страницу - что сейчас и происходит)

Родительский компонент: 

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

Child Html: 

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

У меня такое чувство, что мне не нужно совершать вызов, чтобы получить menuItems в дочернем компоненте, и я мог бы получить его от родителя, но я не уверен, как я все испортил.

1 Ответ

0 голосов
/ 29 июня 2018

У вас нет ребенка / родителя. Самый простой способ сделать это - использовать переменную в сервисе. Если к вашим услугам у вас есть что-то вроде 

checkedItems:any[]=[]

Если ваш заголовок 

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

В вашем компоненте где-то 

yourservice.checkedItems[index]=true
...