对@output 装饰器行为感到困惑答案

【问题标题】：Getting confused in @output decorator behaviour对@output 装饰器行为感到困惑
【发布时间】：2020-03-04 00:33:43
【问题描述】：

我正在通过输入输出装饰器并尝试在下面的示例中实现演示目的，以了解这些装饰器的重要性：

home.component.html

<app-login>
  <app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox>
</app-login>

login.comp.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{
  public checkBoxValueChanged(event){
    alert("called from here "+event)
  }
}

login.comp.html

<form>
    <input type="text" placeholder="email"/>
    <input type="password" placeholder="password"/>
    <ng-content></ng-content>
    <input type="button" value="login"/>
</form>

checkbox.comp.ts

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

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent{
  @Output() checkBoxValue : EventEmitter<any> = new EventEmitter();
  valueChanged(value){
    this.checkBoxValue.emit(value)
  }
}

checkbox.comp.html

<input type="checkbox" value="Y" (change)="valueChanged($event.target.value)"/> Remember Me

根据我的理解，checkBoxValueChanged 应该在登录组件中，因为在登录组件中调用了复选框组件，但这不起作用。如果我在登录组件中写入 checkBoxValueChanged，我会收到 ERROR TypeError: _co.checkBoxValueChanged is not a function 的错误。但是当我在 home 组件中编写这个函数时，一切正常，但我很困惑为什么它在登录组件中时不起作用。

【问题讨论】：

因为 checkBoxValueChanged 在 HomeComponent 模板内部被调用。如果您在 home.comp.ts 中没有这样的方法，则会收到错误消息。你想做什么？

标签： angular typescript decorator

【解决方案1】：

当您在home.component.ts 中使用app-checkbox 组件时，您应该在home.component.ts 组件中拥有checkBoxValueChanged 函数，只需将checkBoxValueChanged 函数从login.comp.ts 移动到home.component.ts，您将收到发出的值，休息是完美的！

或者如果您想在login.comp.ts 中发出值，请不要遵循上述观点，而是将您的<app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox> 标签移动到login.comp.html...

希望对你有帮助！！ :)

【讨论】：