在Aurelia中,可以使用@children
装饰器来获取视图/视图插槽中动态创建的自定义元素的实例。下面是一个示例:
首先,创建一个自定义元素DynamicElement
:
import {bindable, inject, customElement} from 'aurelia-framework';
@inject(Element)
@customElement('dynamic-element')
export class DynamicElement {
@bindable name;
constructor(element) {
this.element = element;
}
attached() {
console.log(`Dynamic element ${this.name} attached`);
}
}
然后,在父组件中使用视图插槽和@children
装饰器获取动态创建的自定义元素的实例:
import {bindable, children} from 'aurelia-framework';
export class ParentComponent {
@bindable elements = [];
@children('dynamic-element') dynamicElements;
addElement() {
this.elements.push({name: `Element ${this.elements.length + 1}`});
}
}
在父组件的视图中,使用repeat.for
指令来动态创建自定义元素,并在视图插槽中引用它们:
现在,当点击“Add Element”按钮时,会动态地创建自定义元素,并将其添加到elements
数组中。同时,@children
装饰器会将动态创建的自定义元素实例存储在dynamicElements
属性中。
可以在父组件中的attached()
生命周期钩子中访问dynamicElements
属性,以获取动态创建的自定义元素的实例。例如:
import {bindable, children} from 'aurelia-framework';
export class ParentComponent {
@bindable elements = [];
@children('dynamic-element') dynamicElements;
attached() {
console.log(this.dynamicElements); // 输出动态创建的自定义元素的实例数组
}
// ...
}
这样,你就可以在父组件中获取动态创建的自定义元素的实例了。