對@output 裝飾器行為感到困惑

Question

我正在通過輸入 output 裝飾器並嘗試在以下示例中實現以用於演示目的，以了解這些裝飾器的重要性：

home.component.html

<app-login>
  <app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox>
</app-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>

復選框.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 組件中編寫這個 function 時，一切正常，但我很困惑為什么它在登錄組件中時不起作用。

Answer 1

當您在 home.component.ts 中使用app-checkbox組件時，您應該在home.component.ts組件中有checkBoxValueChanged home.component.ts ，只需將checkBoxValueChanged home.component.ts從login.comp.ts移動到 home.component.ts 即可收到發出的值, rest 完美！！

或者，如果您想在login.comp.ts中發出值，請不要遵循上述要點，而是將您的<app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox>標簽移動到login.comp.html ...

希望對你有幫助：！ :)