在Angular中,可以使用ng-container
来创建一个临时的父作用域,从而在其中使用父作用域的变量和方法。下面是一个示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
export class ParentComponent {
message: string = 'Hello';
showChild: boolean = true;
changeMessage() {
this.message = 'Updated Message';
}
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ message }}
`,
})
export class ChildComponent {
@Input() message: string;
}
在父组件中,我们使用ng-container
来包裹子组件,并使用*ngIf
指令来控制子组件的显示和隐藏。在子组件中,我们使用@Input
装饰器来接收父组件传递过来的message
变量。
这样,当点击父组件中的按钮时,message
变量的值会改变,并通过属性绑定传递给子组件,子组件会实时更新显示。
希望这个示例对你有帮助!