0

Есть у меня основной компонент, в котором лежит два компонента: headerTable, rowTable.
В headerTable у меня именования колонок таблицы и есть чексбокс, который при checked выделяет все строки в rowTable (и наоборот). В rowTable тоже есть checkbox (как раз этот чексбокс и выделятся для выбора строки). Я хочу сделать следующий сценарий:

  1. Нажать на выделение всех строк (в headerTable нажать на чексбокс), и убрать из выделения какую-нибудь из строк.
  2. После того, как уберу чексбокс в какой-нибудь строке, в headerTable чексбокс должен убраться.

Я пытался это сделать посредством декоратора Input, но, видимо, тк разные контексты, то и инпут не срабатывает.

@Component({
  selector: 'headerTable',
  template: '<input type="checkbox" [ngModel]="allItems" (ngModelChange)=onChange($event)>'
})
export class HeaderComponent {
  @Input() allItems: boolean;
  onChange(flag: boolean) {
    this.allItems = flag;
  }
}
...
@Component({
  selector: 'row',
  template: '<input type="checkbox" (change)="onChange($event)">'
})
export class RowComponent {
  @Output() checkedItem = new EventEmitter<number>();
  onChange(flag: boolean) {
    this.checkedItem.emit(5);
  }
}
...

page.html:

<headerTable [allItems]="allItems"></headerTable>
<row (checkedItem)="checkedItem($event)"></row>

page.ts:

  checkedItem(id: number) {
    this.allItems = false;
  }

1 ответ 1

1

Мне немного тяжело разобраться в вопросе, обладая ограниченным количеством информации. Но я так понял из вопроса, что вы пытаетесь заставить коммуницировать 2 компонента, находящиеся на 1 уровне через родителя:

введите сюда описание изображения

Вот именно в такие моменты приходят на помощь сервисы-состояния, потому что обычную коммуникацию намного тяжелее оддебажить. На вашем месте я б создал такой сервис:

@Injectable()
export class TableService implements OnDestroy {
  public allItemsSelected$ = new BehaviorSubject(false);

  public ngOnDestroy(): void {
    this.allItemsSelected$.complete();
  }

  public setAllItemsSelectedTo(selected: boolean): void {
    this.allItemsSelected$.next(selected);
  }
}

Далее добавил бы сервис в провайдеры родительского компонента, который находится сверху app-table-row и app-table-header:

@Component({
  selector: 'app-parent',
  viewProviders: [TableService]
})
export class ParentComponent {
  constructor(private tableService: TableService) {}

  public get allItemsSelected$(): Observable<boolean> {
    return this.tableService.allItemsSelected$.asObservable();
  }
}

В шаблоне компонента мы уже исключаем коммуницирование через обычные переменные:

<app-table-header [allItems]="allItemsSelected$ | async"></app-table-header>

В методе, который слушает событие ngModelChange мы также заменяем переменную на генерирование события:

constructor(private tableService: TableService) {}

public onChange(selected: boolean): void {
  this.tableService.setAllItemsSelectedTo(selected);
}

Точно также инжектим этот сервис в компонент app-table-row и при клике на чекбокс - если значение событие равняется false, то генерируем событие для app-table-header, это решение вашего второго вопроса:

После того, как уберу чексбокс в какой-нибудь строке, в headerTable чексбокс должен убраться.

@Component({
  selector: 'app-table-row'
})
export class TableRowComponent {
  constructor(private tableService: TableService) {}

  public onChange(selected: boolean): void {
    if (selected) {
      return;
    }

    this.tableService.setAllItemsSelectedTo(selected);
  }
}

P.S. - генерировать событие checkedItem уже не нужно.

2
  • Спасибо, про сервис была идея, но не избыточно ли это всё для одной малой логики - убрать чекбокс?
    – bruce
    8 апр 2019 в 14:38
  • а в чем избыточность? взамен спаггети с одной переменной и аутпутами вы получаете тотальный контроль над бизнес логикой, к тому же Мишко не зря придумал сервисы (они ж ведь не для дураков)? :) 8 апр 2019 в 14:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.