在Aurelia中,可以使用装饰器@ViewChild获取子元素的引用。
首先在子组件的类上添加@bindable装饰器来声明要从父组件传递给子组件的属性。然后使用@inject装饰器将ViewContainerRef注入子组件中,这允许我们在子组件中获取子元素的引用。最后,在子组件中使用@ViewChild装饰器获取子元素的引用。
下面是示例代码:
父组件(parent-component.ts):
import { Component } from 'aurelia-framework';
@Component({
selector: 'parent-component',
template: `
`
})
export class ParentComponent {
accessChild() {
// 访问子元素的函数
console.log(this.child.element);
}
}
子组件(child-component.ts):
import { Component, ViewChild, ViewContainerRef } from 'aurelia-framework';
@Component({
selector: 'child-component',
template: ''
})
export class ChildComponent {
@ViewChild('element') element;
constructor(private viewContainerRef: ViewContainerRef) {
}
attached() {
// 访问ViewContainerRef对象中的子元素
console.log(this.viewContainerRef.element);
}
}
在子组件中,我们可以使用@ViewChild装饰器获取子元素的引用,并将其保存在element属性中。在父组件中,我们可以通过访问子组件的属性来获取子元素的引用。在这个例子中,子元素是一个div。
注意:要获取子元素的引用,我们必须等到视图层次结构完全渲染完成,因此我们可以在子组件的attached()生命周期钩子函数中访问