Angular 在@output decorator行为中感到困惑

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

home.component.html

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

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

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

login.comp.html

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

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

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

checkbox.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)
  }
}

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

从'@angular/core'导入{Component，EventEmitter，Output}；
@组成部分({
选择器：“应用程序复选框”，
templateUrl:'./checkbox.component.html'，
样式URL:['./checkbox.component.css']
})
导出类CheckboxComponent{
@Output（）checkBoxValue:EventEmitter=neweventemitter（）；
值已更改（值）{
this.checkBoxValue.emit（值）
}
}

checkbox.comp.html

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

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

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

记得我吗

---

根据我的理解，checkBoxValueChanged应该在登录组件中，因为CheckboxComponent在登录组件中被调用，但这不起作用。我收到的错误为

错误类型错误：_co.checkBoxValueChanged不是一个函数

，如果我在登录组件中写入checkBoxValueChanged。但是，当我在home组件中编写此函数时，一切正常，但我不明白为什么它在登录组件中不起作用。

当您在

home.component.ts

组件中使用

app checkbox

组件时，您应该在

home.component.ts

中更改

函数，只需将
login.comp.ts
中的
checkBoxValueChanged
函数移动到
home.component.ts
，您就会收到发出的值，其余的值就完美了

或者，如果您希望在
login.comp.ts
中发出值，请不要遵循上述要点，而是将
标记移动到
login.comp.html

希望它能帮助你！！：）
 当您在
home.component.ts
组件中使用
app checkbox
组件时，应该在
home.component.ts
组件中设置
checkBoxValueChanged
功能，只需将
login.comp.ts
中的
checkBoxValueChanged
函数移动到
home.component.ts
，您就会收到发出的值，其余的值就完美了

或者，如果您希望在
login.comp.ts
中发出值，请不要遵循上述要点，而是将
标记移动到
login.comp.html

希望它能帮助你！！：）
 因为checkBoxValueChanged是在HomeComponent模板内部调用的。如果home.comp.ts中没有这种方法，则会出现错误。您想做什么？因为checkBoxValueChanged在HomeComponent模板内被调用。如果home.comp.ts中没有这种方法，则会出现错误。你想做什么？