如何利用 Angular Signals 切换组件的可见性

Signal我使用的技巧是从/中的状态开始WritableSignal。这通常位于组件/服务边界，因此它也是input()or的一个很好的候选者model()：

type Config = { name: string; hidden: boolean; };

const sectionConfig = signal<Config[]>([]);

然后我从那里使用 进行创作computed()。无论是整个切片：

const visibleSections = computed(() => {
  const sections = this.sectionConfig();
  return sections.filter(s => !s.isHidden);
});

或者单独的键：

const isSomeComponentVisible = computed(() => {
  const sections = this.visibleSections();
  return sections.find(s => s.name === 'someComponent') > -1;
});

const isOtherComponentVisible = computed(() => {
  const sections = this.visibleSections();
  return sections.find(s => s.name === 'otherComponent') > -1;
});

然后我将它们绑定到需要的地方：

@if (isSomeComponentVisible()) {
  <some-component></some-component>
}

@if (isOtherComponentVisible()) {
  <other-component></other-component>
}

诀窍在于意识到您必须跟踪的唯一状态是sectionConfig。所有其他状态（包括）都是派生状态。创建另一个/然后在更改时使用它来更新visibleSections它可能会很诱人，但这不是必需的，只会导致更多问题（混乱、必须设置等）。SignalWritableSignalvisibleSectionseffect()sectionConfigallowSignalWrites

这与我使用 RxJS 的方式非常相似。它组成了从原始数据（配置列表）到所需数据（某些键的可见性）的管道。

缺点是单个属性不是动态的。您需要is_X_Visible()为每个属性创建一个信号。如果您不想创建这些（或者您不能创建，因为您直到运行时才知道键），您需要引入一个（调用方式与任何其他基于参数的管道Pipe相同：）或者您需要调整最终组合的形状以适应所需的运行时查找：@if (visibleSections() | contains:'someComponent')

const keyToVisibleMap = computed(() => {
  const sections = this.visibleSections();
  return sections.reduce((keys, section) => {
    keys[section.name] = !section.hidden;
    return keys;
  }, {});
});

@if (keyToVisibleMap()['someComponent']) {
  <some-component></some-component>
}

@if (keyToVisibleMap()['otherComponent']) {
  <other-component></other-component>
}

然后为了更新，你只需将一个新值传递给顶层的Signal/ WritableSignal，其余部分就会沿着反应树级联下来：

type SetSectionVisibilityEvent = {
  itemValue: { name: string };
  value: { name: string }[];
}

public setSectionVisibility(e: SetSectionVisibilityEvent): void {
  const newConfig = [...this.sectionConfig()];
  const section = newConfig.find(s => s.name === e.itemValue.name);
  if (section) {
    section.hidden = e.value.findIndex(p => p === e.itemValue) === -1;
  }
  this.sectionConfig.set(newConfig);
}

第一步是转换sectionConfig为主要信号。

sectionConfig = signal([
  {
    name: 'someComponent',
    hidden: false,
  },
  {
    name: 'otherComponent',
    hidden: false,
  },
]);

然后，该属性visibleSections是一个派生状态，因此我们使用linkedSignal从原始状态派生状态sectionConfig（请注意，我使用linkedSignal而不是computed因为您有两种方式绑定到 HTML [(ngModel)]="visibleSections"，如您所知computed是不可写的所以我们使用linkedSignal）。

visibleSections = linkedSignal(() => {
  return this.sectionConfig().filter((item: any) => !item.hidden);
});

当我们想使用 UI 进行过滤时，我们只需要字符串值，因此我们创建另一个派生状态来确定需要启用的组件的字符串。

visibleSectionsFlags = computed(() => {
  return this.sectionConfig()
    .filter((item: any) => !item.hidden)
    .map((item: any) => item.name);
});

更改方法，我们利用update提供信号值的方法。在这里，我们查找选定的值，然后切换标志。您需要注意的最重要的一点是，我们用来array destructuring创建一个新的内存引用（数组和对象存储为内存引用），信号检查值是否已更改。因此，我们必须更改数组的内存引用，然后信号才会被视为要更改的值，并重新计算派生状态。

public setSectionVisibility(e: any): void {
  this.sectionConfig.update((sectionConfig: any) => {
    const foundIndex = this.sectionConfig().findIndex(
      (c) => c.name === e.itemValue.name
    );
    if (foundIndex > -1) {
      sectionConfig[foundIndex].hidden = !sectionConfig[foundIndex].hidden;
    }
    return [...sectionConfig];
  });
}

在 HTML 端，我们可以绑定visibleSections到ngModel，然后隐藏/显示组件，我们使用数组方法includes来检查是否应该显示组件visibleSectionsFlags().includes("someComponent")。

完整代码：

TS：

import {
  Component,
  OnInit,
  computed,
  linkedSignal,
  signal,
} from '@angular/core';
import { ImportsModule } from './imports';
import { JsonPipe } from '@angular/common';
interface City {
  name: string;
  code: string;
}

@Component({
  selector: 'app-a',
  template: `a comp`,
  standalone: true,
})
export class A {}

@Component({
  selector: 'app-b',
  template: `b comp`,
  standalone: true,
})
export class B {}

@Component({
  selector: 'multi-select-basic-demo',
  templateUrl: './multi-select-basic-demo.html',
  standalone: true,
  imports: [ImportsModule, A, B, JsonPipe],
})
export class MultiSelectBasicDemo {
  sectionConfig = signal([
    {
      name: 'someComponent',
      hidden: false,
    },
    {
      name: 'otherComponent',
      hidden: false,
    },
  ]);

  visibleSections = linkedSignal(() => {
    return this.sectionConfig().filter((item: any) => !item.hidden);
  });

  visibleSectionsFlags = computed(() => {
    return this.sectionConfig()
      .filter((item: any) => !item.hidden)
      .map((item: any) => item.name);
  });

  public setSectionVisibility(e: any): void {
    this.sectionConfig.update((sectionConfig: any) => {
      const foundIndex = this.sectionConfig().findIndex(
        (c) => c.name === e.itemValue.name
      );
      if (foundIndex > -1) {
        sectionConfig[foundIndex].hidden = !sectionConfig[foundIndex].hidden;
      }
      return [...sectionConfig];
    });
  }
}

HTML：

<p-multiSelect
  #multiselect
  defaultLabel="Show/hide sections"
  optionLabel="name"
  name="show-hide-sections"
  scrollHeight="300px"
  styleClass="multiselect-as-button mr-3 ml-3"
  dropdownIcon="fas fa-bars rotate-90"
  [options]="sectionConfig()"
  [(ngModel)]="visibleSections"
  [displaySelectedLabel]="false"
  (onChange)="setSectionVisibility($event)"
  [style]="{ width: '208px' }"
  [showHeader]="false"
  [appendTo]="'body'"
></p-multiSelect>
<br /><br />
@if (visibleSectionsFlags().includes("someComponent")) {
<app-a></app-a><br /><br />
} @if (visibleSectionsFlags().includes("otherComponent")) {
<app-b></app-b><br /><br />
}

Stackblitz 演示