Angular 9 - несколько дочерних элементов внутри родителя

Question

Может кто-нибудь объяснить мне, почему соответствующий дочерний переключатель не обновляется должным образом? Щелкните второй дочерний элемент, и первый дочерний элемент обновится, но на консоли будет показан правильный вызываемый метод. Разве нельзя вызвать такой же дочерний компонент в родительском компоненте, как я?

https://stackblitz.com/edit/angular-ivy-ch65ks

Answer 1

https://stackblitz.com/edit/angular-ivy-ch65ks

Здесь добавлен ответ: child.compontent. html

<input type="checkbox" id="toggle-button-checkbox_{{inputId}}" [disabled]="isDisabled">
<label class="toggle-button-switch" for="toggle-button-checkbox_{{inputId}}" (click)="toggleCheck()"></label>
<div class="toggle-button-text">
    <div class="toggle-button-text-on">{{textOne}}</div>
    <div class="toggle-button-text-off">{{textTwo}}</div>
</div>

child.component.ts

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
   inputs: ['textOne', 'textTwo', 'checkedValue', 'isDisabled','inputId'],
  outputs: ['checkToEmit']
})
export class ChildComponent implements OnInit {
checkToEmit = new EventEmitter<boolean>();
  textOne: string;
  textTwo: string;
  inputId;
  checkedValue: boolean;
  isDisabled: boolean = false;
  constructor() { }
  ngOnInit(): void {
    console.log(this.checkedValue);
   }
  toggleCheck() {
    this.checkedValue = !this.checkedValue;
    this.checkToEmit.emit(this.checkedValue);
  }
}

родительский компонент. html

<app-child name="one" textOne="Yes" textTwo="No" [checkedValue]="test1" (checkToEmit)="test1Checked($event)" inputId="1">
</app-child>

<app-child name="two" textOne="Yes" textTwo="No" [checkedValue]="test2" (checkToEmit)="test2Checked($event)" inputId="2">
</app-child>  

Answer 2

Это потому, что в обоих случаях у вас одинаковый идентификатор. Попробуйте добавить идентификатор <input> в дочерний компонент с некоторым уникальным ключом от родительского элемента в обоих случаях, и он должен работать нормально.

Answer 3

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

Вам необходимо передать идентификатор в качестве ввода.

в child.component.ts

добавьте Id в массив inputs:

inputs: ['textOne', 'textTwo', 'checkedValue', 'isDisabled', 'Id'],

и определите Id

Id: string;

In в child.component.html, привяжите идентификатор к Id

<input type="checkbox" [id]="Id" [disabled]="isDisabled">
<label class="toggle-button-switch" [for]="Id" (click)="toggleCheck()"></label>
<div class="toggle-button-text">
    <div class="toggle-button-text-on">{{textOne}}</div>
    <div class="toggle-button-text-off">{{textTwo}}</div>
</div>

и передайте идентификатор из parent.component.html

<app-child 
    name="one"
    id="one"
    textOne="Yes"
    [Id]="'first'"
    textTwo="No"
    [checkedValue]="test1"
    (checkToEmit)="test1Checked($event)"
>
</app-child>

<app-child
    name="two"
    id="two"
    textOne="Yes"
    [Id]="'second'"
    textTwo="No"
    [checkedValue]="test2"
    (checkToEmit)="test2Checked($event)"
>
</app-child>