Übergeben der Eltern, wenn übergeordnet ist der gleiche Komponententyp in Aurelia

Question

Bearbeiten: Diese Frage betitelt "Erhalte Eltern über DI, wenn Eltern ist der gleiche Typ in Aurelia" aber aufgrund wie meine Elemente verschachtelt sind, macht es Es ist sinnvoller, nur das übergeordnete Element an das Element zu binden, sodass der Titel entsprechend geändert wurde.

Wenn ich ein benutzerdefiniertes Element habe, Thing, die ein Kind hat Thing (das Thing ein anderes Kind hat, usw.), wie kann ich injizieren, um die übergeordnete Instanz, wenn die Klasse das gleiche ist?

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

Als weitere Komplexität wird die Wurzel Thing Element keine Eltern haben, so dass die DI für optionale Injektion ermöglichen muss.

Answer 1

Dieses Problem scheint nicht richtig oder notwendig zu sein, DI zu verwenden. Wenn ein Element einige spezifische Eingabedaten von seinem Verbraucher erhalten soll, wäre @bindable meine natürliche erste Überlegung. Wie wäre es also mit einem @bindable parentThing in?

Auf der anderen Seite, wenn Sie den übergeordneten Bindungskontext zugreifen möchten, betrachten Sie bind()component life cycle.

Answer 2

Ich glaube nicht, dass Ihr Problem mit DI gelöst werden kann. Thing muss @transient sein, wenn Sie mehrere Instanzen davon haben möchten. Dies bedeutet, dass der Container keine Referenzen auf Dinge enthält, die er erstellt.

Answer 3

Hier ist, wie das tun: 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 { 
} 

optional-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; 
    } 
}