在Angular 8中,可以通过使用@Input
和@Output
装饰器来创建两个独立变量之间的链接。以下是一个示例:
ParentComponent
的父组件,并在其中声明一个名为parentVariable
的变量,并将其传递给子组件。import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Parent Variable: {{ parentVariable }}
`
})
export class ParentComponent {
parentVariable: string = 'Initial value';
updateParentVariable(value: string) {
this.parentVariable = value;
}
}
ChildComponent
的子组件,并在其中声明一个名为childVariable
的变量,并通过@Input
装饰器接收来自父组件的值。当该变量发生变化时,通过@Output
装饰器将其发送给父组件。import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Child Variable: {{ childVariable }}
`
})
export class ChildComponent {
@Input() childVariable: string;
@Output() childVariableChange: EventEmitter = new EventEmitter();
updateChildVariable() {
this.childVariable = 'New value';
this.childVariableChange.emit(this.childVariable);
}
}
在父组件的模板中,使用方括号[]
将parentVariable
绑定到子组件的childVariable
输入属性上。同时,使用圆括号()
将子组件的childVariableChange
输出属性绑定到父组件的updateParentVariable
方法上。
这样,当子组件的updateChildVariable
方法被触发时,子组件的childVariable
将被更新为新值,并通过输出属性将其发送给父组件的updateParentVariable
方法。父组件的parentVariable
也将相应地更新,并在父组件的模板中显示为新值。
请注意,父子组件之间的数据流是单向的,即父组件可以传递数据给子组件,但子组件不能直接修改父组件的数据。如果需要双向绑定,可以使用[(ngModel)]
或自定义双向绑定属性。