Angular Usinge@Input增加父组件的计数

我正在做一个简单的练习来演示角度变量的子/父交互。我一直在网上寻找解决方案，但主要是建议观察对象、服务和事件发射器。但是，这些对我正在做的工作范围没有帮助，我希望实现子组件的简单增量。以下是我所拥有的：

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++;
  }
}

从“@angular/core”导入{Component，Input}”；
@组成部分({
选择器：“计数器”，
模板：`
{{count}}

`,
风格：[
`
.计数器按钮{
字号：1rem；
填充物：5px10px；
颜色：#5858；
}
`
]
})
出口级反元件{
计数：数字=42；
}
@组成部分({
选择器：“计数器按钮”，
模板：`
点击
`
})
导出类计数器按钮组件{
@输入（）计数：数字；
构造函数（）{}
增量（）{
这个.count++；
}
}

我的任务是在通过单击按钮调用函数

increment（）

后，让

CounterComponent

增加

CounterComponent

中的值计数。我尝试通过构造函数传递组件，但没有将值分配回主计数。如何使用@Input将计数发送到子组件并使其增加父组件计数？不使用服务、发射器、可观察物。。等等

---

感谢您在计数器组件的按钮上添加eventlistener

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() {}
}

从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“计数器”，
模板：`
{{count}}

`,
风格：[
`
.计数器按钮{
字号：1rem；
填充物：5px10px；
颜色：#5858；
}
`
]
})
导出类计数器组件实现OnInit{
计数：数字=42；
恩戈尼尼特（）{
文件
.querySelector（“增量”）
.addEventListener（“单击“，（）=>this.increment（））；
}
增量（）{
这个.count++；
}
}
@组成部分({
选择器：“计数器按钮”，
模板：`
点击
`
})
导出类计数器按钮组件{
构造函数（）{}
}

---

我创建了一个应用程序，其中所有内容都可以按照您的要求工作。

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

儿童：

@Input() countObj: any;

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

母公司

   countObj={counter:0}

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

countObj={counter:0}
{{countObj.counter}

为什么不使用发射器？最简单的方法是使用

EventEmitter

作为

@Output

，它将在每次递增数字时发出值，家长需要倾听您的解决方案是否100%有效，但为了便于学习，我想知道这是否只有使用事件发射器才能实现？例如，对于子/父交互，什么可能是需要最少导入次数的最佳解决方案？没有服务，没有可观测，没有发射器，等等。。只是简单的数据绑定/decorators@Mustafa我已经更新了我的解决方案。不使用事件发射器或输入。我希望这就是你要找的。我还更新了stackblitz示例我更喜欢旧的解决方案-只是我的问题是最佳角度实践你会只使用事件发射器吗？只能通过@Input decorators才能实现吗？@Mustafa是的。在您的情况下，最好使用事件发射器。但是angular还提供了其他解决方案来实现组件交互（比如使用服务）。您可以在下面的链接中阅读更多关于它们的信息