AngularJS 2コンポーネントの入力を非同期的に更新する

Question

AngularJS 2のコンポーネントの@Inputを非同期コールバックフィードにする方法はありますか？ （私は特にRC7を使っています）

私の目標は、階層内のそのレベルのサービスへのインターフェイスとして機能するラッパーコンポーネントの階層を持つことです。アイデアは、子コンポーネントにモデルを提供するために、親コンポーネントのインターフェースを使用することができます。

<parent-comp #parent> 
    <child-comp 
     *ngFor="let id of parent.childIds;" 
     [model]="parent.getChild(id)"> 
     <!-- And so on, with the child's children, etc. --> 
    </child-comp> 
</parent-comp> 

親コンポーネントのメソッドは、A返すサービスメソッドをラップします：つまり、親コンポーネントは、テンプレート内のすべての、そのモデルを設定するには、子コンポーネント上の入力にマップするgetChild(ID)を提供します約束する（この時点で）。だから、後でインスタンスを返す必要があるので、親コンポーネントのgetChild()メソッドの内容が問題になります。

私が考えた解決策の1つは、モデルのインスタンスを移入するためにこれらのメソッドを再作成することです。

// In the parent component 
public getChild(id: string): Child { 
    let child = new Child(); 
    this.service.getChild(id, child); 
    return child; 
} 

// In the parent service 
public getChild(id: string, model: Child): Promise<Child> { 
    this.http.get(some_url).toPromise().then(res => model.update(res)); 
} 

親コンポーネントメソッドが子にモデルを提供できるように、この構造体を処理する方が良いでしょうか？

Answer 1

注：私はAngular 2.1に移行しました。

私が見つけた1つの解決策は、サービスの依存性注入パターンを活用することでした。たとえば、私のモジュールでは、シングルトンサービスは1つしかありませんでした。他のすべてはそのサービスからの階層だった。だから、NgModuleで、私はそのサービスを提供する：

そのサービスに依存しています最初の層のサービスのために

@NgModule({ provides: SuperService }) 
export class MyModule; 

（すなわち、このサービスはSuperServiceの子だろう）、それはを参照して定義されますこのSuperServiceコンストラクタから：

@Injectable() 
export class FirstTierService (private superService: SuperService) { /** */ } 

対応するコンポーネントは、次にSuperServiceと独自FirstTierServiceの新しいインスタンスの両方を呼び出し：

@Component({ 
    providers: [FirstTierService] 
}) 
export class FirstTierComponent { 
    constructor (
     private ftService: FirstTierService, 
     @Host() private superService: SuperService) { /** */ } 
} 

これにより、FirstTeirComponentはホストコンポーネントのインスタンス（DOMの親コンポーネントの一部）からSuperServiceを取得することが保証されました。デコレータを削除すると、依存要素の注入により、この要素の親要素ではなくサービスが親要素で検出されるDOM強制が削除されます（これについてのドキュメントを誤解している可能性があります）。

子供は同様のパターンで確立されます。子サービスはコンストラクタの親を参照し、子コンポーネントはコンポーネント定義のprovidesに独自のサービスを配置し、コンストラクタ内の両方のサービスを参照します。 HTML用として

@Injectable() 
export class SecondTierService (private ftService: FirstTierService) { /** */ } 

@Component({ 
    providers: [SecondTierService] 
}) 
export class SecondTierComponent { 
    constructor (
     private stService: SecondTierService, 
     @Host() private ftService: FirstTierService) { /** */ } 
} 

、私は#参照を誤解した

<parent #parent> 
    <child *ngFor="let child of parent.ftService.children"> 
    </child> 
</parent> 

は、（第一階層の親サービスのメンバ変数がftServiceと呼ばれていたとアレイメンバーがchildrenと呼んでいたのコースと仮定。）