我正在通过输入输出装饰器,并尝试在以下示例中出于演示目的实现,以了解这些装饰器的重要性:
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应该在登录组件中,因为在登录组件内部调用了复选框组件,但这不起作用。我ERROR TypeError: _co.checkBoxValueChanged is not a function
在登录组件内写checkBoxValueChanged时遇到错误。但是,当我在home组件内编写此函数时,一切正常,但我感到困惑,为什么在登录组件中它不起作用。
checkBoxValueChanged
在home.component.ts
组件中使用app-checkbox
组件时home.component.ts
,您应该在组件中具有功能,只需将checkBoxValueChanged
功能home.component.ts
从移至即可login.comp.ts
,您将收到发出的值,其余的就是完美的!
或者,如果您希望在中发出值login.comp.ts
,请不要遵循上述要点,而应将<app-checkbox (checkBoxValue)="checkBoxValueChanged($event)"></app-checkbox>
标签移动到login.comp.html
...
希望对您有帮助!!:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句