データの3ステート角度componnetスプライシング[] []より完全なデモ

要件：

画像のセットは、各画像は、説明に対応します。その後、写真のこのグループは、SVGの塗りに応じて、再び2つのグループに分け。

だから、今、3つのフォルダ内の画像の3つのグループがあります。

今、私たちは父-1の部品やアセンブリの父-2忠表示にしたい、その説明にコンポーネント父親-2に1枚の画像を表示し、その説明に部品父親-1内のすべての画像を表示します。

あなたは、ボタンのスタイルの変更をコンポーネントの父-1フォトボタンをクリックすると、画像のボタンアセンブリの父-2、ボタンのスタイルの変更]をクリックします。

画像を表示するコンポーネント子。

---

 写真は、以下の方法を示します。

<!-- child.html -->
<button [ngClass]="
    posture.active === postureActive.selected
      ? 'on'
      : ''
  "
  *ngFor="let posture of postures"
  (click)="select(posture.data.src)"
>
  <div>
    <img src="{{ posture.data.src }}" />
    <p>{{ posture.data.type }}</p>
  </div>
</button>

<!-- posture.active 为true, 表示图片被选中; img是图片, p是图片的描述 -->

次のように画像の形式は説明します。

// child.ts
export enum Posture {
  HFS = 'HFS',
  HFP = 'HFP',
  HFDR = 'HFDR '
}

interface PostureSource {
  src: string;
  type: Posture;
}

export const POSTURE_SOURCES: PostureSource[] = [
  { src: 'assets/postureState/postureOptional/HFS.svg', type: Posture.HFS },
  { src: 'assets/postureState/postureOptional/FFS.svg', type: Posture.FFS },
  { src: 'assets/postureState/postureOptional/HFDR.svg', type: Posture.HFDR }
];

[以下は、この記事の核心です]

姿勢の子プロセスの着信コンポーネントは次のとおりです。

// child.ts
enum PostureActive {
  disabled = 0,
  selected = 1,
  unselected = 2
}
interface PostureChange<T extends { src: any }> {
  data: T;
  active: PostureActive;
}
export class ChildComponent implements OnInit {
  protocolState = ProtocolState;
  postureActive = PostureActive;
  _postures: PostureChange<PostureSource>[] = POSTURE_SOURCES.map(s => ({
    data: s,
    active: this.postureActive.unselected
  }));

  @Input() postures: any;
  ngOnInit() {
    if (typeof this.postures === 'string') {
      let currentSource = '';
      if (this.postureState === ProtocolState.Started) {
        currentSource = `assets/postureState/postureStarted/${this.postures}.svg`;
      } else {
        currentSource = `assets/postureState/postureUnstart/${this.postures}.svg`;
      }
      const currentPosture = [
        {
          src: currentSource,
          type: `${this.postures}`
        }
      ];
      this.postures = currentPosture.map(s => ({
        data: s,
        active: this.postureActive.disabled
      }));
      console.log(
        'from father-2: ',
        'currentPosture:',
        currentPosture,
        'after map(): ',
        this.postures
      );
    } else {
      this.postures = this._postures;
      console.log('from father-1: ', this.postures);
    }

    console.log(
      '@input() postures: ',
      this.postures
    );
  }
}

父-1次のようにコンソールを印刷します：

 

コンソール、次のように父親-2を印刷します：

 

次のように選択した機能のクリックを増やすには：

// child.ts

  select(posture: Posture) {
    if (this.postures[0].active !== this.postureActive.disabled) {
      this.postures = this.postures.map((a: any) =>
        a.data.src === posture
          ? { ...a, active: this.postureActive.selected }
          : { ...a, active: this.postureActive.unselected }
      );
    }
    console.log('select: ', this.postures, '|', posture);
  }

 次のように父親-2ボタンをクリックし、コンソールが出力されます。

次のように父親-1のボタンをクリックし、コンソールが出力されます。

---

次のように父親-1が記載されています：

<!-- father-1.html -->
<app-child [postures]="postures"></app-child>

// father-1.ts
postures = ['HFS', 'FFS', 'HFDR'];

---

 次のように父親-2が記載されています：

<!-- father-2.html -->
<app-child [postures]="posture"></app-child>

// father-2.ts
posture = 'HFS'; // 这个值应是动态的, 此处为了方便直接赋值