5

これらの投稿とplnkrで説明されているように、再帰コンポーネントをデプロイしようとしています:

親コンポーネントを子コンポーネントに挿入するにはどうすればよいですか?

> `http://plnkr.co/edit/l7jsV0k7DbGJGXPFlSPr?p=preview`

javascript での Angular2 の再帰的テンプレート

ただし、提供されるソリューションは、コンポーネント オブジェクト自体を処理するだけであり、コンポーネントがインスタンス化することになっている HTML タグの問題は解決しません。

<parent> ... </parent>子コンポーネントは、そのテンプレート内で html タグをどのように使用できますか?

私はあなたが提供できるかもしれない助けとおそらくplunkr/fiddleに非常に感謝しています.

4

1 に答える 1

2

循環依存が原因で、テンプレートのみを使用しても望ましい結果は得られません。

例外: コンポーネント 'ChildComponent' のビューの予期しないディレクティブ値 'undefined'

このプランカーでわかるように、これは何かがうまくいかなかったことを示しています (Angular の問題ではなく、一般的な DI 問題)。

子に依存する ParentComponent:

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
  selector: 'parent',
  template: `<p>parent</p>
  <child></child>`,
  directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {}
}

循環依存を引き起こす親に依存する ChildComponent:

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
import {ParentComponent} from './parent.component';

@Component({
  selector: 'child',
  template: `<p>child</p>
  <parent></parent>`,
  directives: [ParentComponent]
})
export class ChildComponent {
  constructor() {}
}

ただし、この例でわかるように DynamicComponentLoader を使用することでこれを実現できますが、無限のコンポーネント レンダリングを停止する何らかの条件を提供することを忘れないでください。私の例では、条件は親コンポーネントの入力パラメーターです。

import {Component, Input} from 'angular2/core';
import {AppComponent} from './app.component';
import {ChildComponent} from './child.component'

@Component({
   selector: 'parent',
   template: `<p>parent</p>
   <child *ngIf="condition"></child>`,
   directives: [ChildComponent]
})
export class ParentComponent {
  constructor() {
  }

  @Input() condition: bool;
}
于 2016-03-16T20:25:53.217 に答える