無法理解輸入裝飾器的行為

Question

我正在實現輸入和輸出裝飾器，但我對功能感到困惑。 這里發生了什么？

父組件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './template.html'
})
export class ParentComponent {

}

父模板

<h1>Parent</h1>
<app-child placeHolderTxt="Add User"></app-child>
<app-child placeHolderTxt="Add Admin"></app-child>

子組件

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './template.html'
})
export class ChildComponent {

  @Input() placeHolderTxt = "";
  count = 0;  
  addUser = function(){
    this.count += 1;    
  }
}

子模板

<div style="float:left;margin-left:100px; border: 1px solid black">
    <table>
        <tr>
            <td><input type="text" placeholder="{{placeHolderTxt}}"/></td>
            <td><input type="button" (click)="addUser()" value="ADD"/></td>
        </tr>
        <tr>
            <td>Total Count : {{count}}</td>            
        </tr>
    </table>
</div>

當我單擊“添加用戶添加”按鈕時，它每次將計數增加 1，但 admin 的計數仍然為 0。我的問題是我無法理解為什么它顯示 admin 的計數為 0，而顯示計數為 0。 我正在使用相同的子組件成員。

Answer 1

count字段不在Component實例之間共享。

您有兩個app-child元素，這意味着您將擁有兩個獨立的count 。

<app-child placeHolderTxt="Add User" [count]="count" (increment)="onIncrement()"></app-child>
<app-child placeHolderTxt="Add Admin" [count]="count" (increment)="onIncrement()"></app-child>

---

您可以利用@Output EventEmitter ，並向上移動count變量。

export class ChildComponent {
  @Input() placeHolderTxt = "";
  @Input() count = 0;

  @Output() increment = new EventEmitter<void>(true);

  addUser(): void {
    this.increment.emit();
  }
}

---

export class ParentComponent {
  count = 0;

  onIncrement(): void {
    this.count++;
  }
}