主页 / 问题 / 967019
Accepted
bruce
Asked:2020-04-08 21:07:22 +0000 UTC2020-04-08 21:07:22 +0000 UTC

如何取消选择相邻组件中的复选框？

  • 772

我有一个包含两个组件的主要组件：headerTable、rowTable。
在 headerTable 中，我有表格列的名称，并且有一个复选框，选中后，将选择 rowTable 中的所有行（反之亦然）。rowTable 也有一个复选框（仅此复选框将突出显示以进行行选择）。我想制作以下脚本：

  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;
  }
typescript

1 个回答

  1. Best Answer

    在信息量有限的情况下，我有点难以弄清楚这个问题。但我从这个问题中了解到，您正在尝试让 2 个组件进行通信，这些组件通过父级处于第一级：

    在此处输入图像描述

    这就是状态服务派上用场的地方，因为常规通信更难调试。如果我是你，我会创建这样的服务：

    @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);
  }
}

    PS -checkedItem不再需要生成事件。

    • 1

相关问题