在Angular 6中,可以使用Input和Output装饰器来在父子组件之间共享变量。
在父组件中,通过使用@Input装饰器来将变量传递给子组件。示例代码如下:
父组件的HTML模板:
父组件的TypeScript代码:
export class ParentComponent {
parentValue: string = 'Hello from parent';
constructor() { }
}
在子组件中,通过使用@Output装饰器来将变量传递回父组件。示例代码如下:
子组件的HTML模板:
{{childVariable}}
子组件的TypeScript代码:
import { Component, Input, Output, EventEmitter } from '@angular/core';
export class ChildComponent {
@Input() parentVariable: string;
childVariable: string = 'Hello from child';
@Output() parentVariableChange = new EventEmitter();
constructor() { }
updateParentVariable(): void {
this.parentVariable = 'Updated value from child';
this.parentVariableChange.emit(this.parentVariable);
}
}
在父组件中,可以通过订阅子组件的事件来获取子组件传递回来的变量值。示例代码如下:
父组件的HTML模板:
{{parentValue}}
父组件的TypeScript代码:
export class ParentComponent {
parentValue: string = 'Hello from parent';
constructor() { }
updateParentVariable(value: string): void {
this.parentValue = value;
}
}
在父组件的模块中,需要将子组件添加到declarations和exports数组中,以便能够在父组件中使用子组件。
这样,父子组件之间的变量共享就完成了。当子组件中的按钮被点击时,父组件的变量将被更新,并在父组件的模板中显示新的值。