使用@Input 增加父组件的计数答案

【问题标题】：Usinge @Input to increment count of parent component使用@Input 增加父组件的计数
【发布时间】：2021-03-21 23:41:38
【问题描述】：

我正在做一个简单的练习来演示 Angular 中变量的子/父交互。我一直在网上寻找解决方案，但主要是建议 Observables、Services 和 Event Emitters。然而，这些对我正在做的事情的范围没有帮助，我想实现一个子组件的简单增量。这是我所拥有的：

import { Component, Input } from "@angular/core";

@Component({
  selector: "counter",
  template: `
    <h2>
      <p>{{ count }}</p>
      <counter-button></counter-button>
    </h2>
  `,
  styles: [
    `
      .counter-button {
        font-size: 1rem;
        padding: 5px 10px;
        color: #585858;
      }
    `
  ]
})
export class CounterComponent {
  count: number = 42;
}

@Component({
  selector: "counter-button",
  template: `
    <button (click)="increment()">
      Click
    </button>
  `
})
export class CounterButtonComponent {
  @Input() count: number;

  constructor() {}

  increment() {
    this.count++;
  }
}

我的任务是让CounterButtonComponent 在通过单击按钮调用函数increment() 后增加CounterComponent 中的值计数。我尝试通过构造函数传递组件，但没有将值分配回主计数。如何使用 @Input 将计数发送到子组件并让它增加父计数？不使用服务、发射器、可观察对象……等。

谢谢

【问题讨论】：

为什么不使用发射器？最简单的方法是使用EventEmitter<number> 作为@Output，每次递增数字时都会发出值，并且父级需要监听

标签： angular typescript

【解决方案1】：

在计数器组件的按钮上添加一个事件监听器。

import { Component, OnInit} from "@angular/core";

@Component({
  selector: "counter",
  template: `
    <h2>
      <p>{{ count }}</p>
      <counter-button></counter-button>
    </h2>
  `,
  styles: [
    `
      .counter-button {
        font-size: 1rem;
        padding: 5px 10px;
        color: #585858;
      }
    `
  ]
})
export class CounterComponent implements OnInit {
  count: number = 42;
  ngOnInit() {
  document
  .querySelector("#increment")
  .addEventListener("click", () => this.increment());
  }
  increment() {
    this.count++;
  }
}

@Component({
  selector: "counter-button",
  template: `
    <button id="increment">
      Click
    </button>
  `
})
export class CounterButtonComponent {

  constructor() {}
}

我创建了一个stackblitz，一切都应该按照你的意愿工作。

【讨论】：

您的解决方案 100% 有效，但为了学习，我想知道这是否只能通过事件发射器实现？就像在孩子/父母互动方面所需的进口数量最少的最佳解决方案一样？没有服务、没有 observables、没有发射器等等……只是简单的数据绑定/装饰器
@Mustafa 我已经更新了我的解决方案。不使用事件发射器或输入。我希望这就是你要找的。我还更新了 stackblitz 示例
我更喜欢旧的解决方案 - 我的问题是，在最佳 Angular 实践中，您是否只使用事件发射器？只能用@Input 装饰器来实现吗？
@Mustafa 是的。在您的情况下使用的最好的东西是事件发射器。但是 Angular 还提供了其他解决方案来实现组件交互（例如使用服务）。您可以在以下链接中阅读有关它们的更多信息angular.io/guide/…

【解决方案2】：

@Mustafa，如果你传递一个数字，只传递值。这就是您需要使用 eventEmitter 的原因。你也可以传递一个对象。然后，对象的一个属性的任何更改都会反映在父对象中。

孩子：

@Input() countObj: any;

increment(){
   this.countObj.counter++;  
}

父母

   countObj={counter:0}

   <child [countObj]="countObj"></child>
   {{countObj.counter}}

【讨论】：