当父母在Aurelia中是相同的组件类型时，通过父母

Question

编辑：此问题的标题是“当父母在Aurelia中是同一类型时通过DI获得父母”，但由于我的元素嵌套，更有意义的是将父元素绑定到元素，所以标题已经改变以反映这一点。

如果我有一个自定义元素，Thing其中有一个孩子Thing（具有另一个孩子Thing，等等），我怎么能注入父实例当类是一样的吗？

export class Thing { 
    static inject = [Thing]; // <-- no reference to Thing as we are inside the class 
    constructor(parentThing) { 
     this.parent = parentThing; 
    } 
} 

作为进一步的复杂性，根Thing元件将具有没有父，所以DI需要允许用于可选注射。

Answer 1

此问题对于使用DI来说看起来不正确或不必要。如果某个元素需要从其客户那里接收一些特定的输入数据，那么@bindable将是我首先想到的。那么如何在Thing中创建@bindable parentThing？

另一方面，如果您想要访问父绑定上下文，请考虑bind()component life cycle。

Answer 2

我不认为你的问题可以用DI解决。 Thing必须是@transient如果你想有它的几个实例。这意味着容器不会持有它创建的东西的引用。

Answer 3

这里是如何做到这一点：https://gist.run?id=b075366d29f2400d3cc931f6fc26db24

app.html

<template> 
    <require from="./thing"></require> 

    <thing name="A"> 
    <thing name="B"> 
     <thing name="C"> 
     <thing name="D"> 
     </thing> 
     </thing> 
    </thing> 
    </thing> 
</template> 

app.js

export class App { 
} 

可选，parent.js

import {resolver} from 'aurelia-dependency-injection'; 

@resolver() 
export class OptionalParent { 
    constructor(key) { 
    this.key = key; 
    } 

    get(container) { 
    if (container.parent && container.parent.hasResolver(this.key, false)) { 
     return container.parent.get(this.key) 
    } 
    return null; 
    } 

    static of(key) { 
    return new OptionalParent(key); 
    } 
} 

thing.html

<template> 
    <h3> 
    My Name is "${name}". 
    <span if.bind="parent">My parent's name is "${parent.name}".</span> 
    <span if.bind="!parent">I don't have a parent.</span> 
    </h3> 
    <content></content> 
</template> 

thing.js

import {bindable, inject} from 'aurelia-framework'; 
import {OptionalParent} from './optional-parent'; 

@inject(OptionalParent.of(Thing)) 
export class Thing { 
    @bindable name; 

    constructor(parent) { 
    this.parent = parent; 
    } 
}