19

AJAX 呼び出しから受け取った情報に基づいて、コンポーネント ツリーを動的に構築したいと考えています。

他のコンポーネント内からDOMにコンポーネントをプログラムで追加する方法は? いくつ<outer-comp>かのロジックに基づいて、<inner-comp>. 次のコードは、要素<inner-comp></inner-comp>を DOM に挿入するだけで、実際の<inner-comp>表現ではありません。

@NgComponent(
  selector: 'outer-comp',
  templateUrl: 'view/outer_component.html',
  cssUrl: 'view/outer_component.css',
  publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {      
  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");
  }
}

更新: 次の方法で内部コンポーネントを正しくレンダリングすることができましたが、これが適切な方法であるかどうかはまだわかりません:

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  AppComponent(this.compiler, this.injector);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler(inner.nodes);
    var block = template(injector);
    inner.replaceWith(block.elements[0]); 
  }

}

4

5 に答える 5

10

AngularDart 0.9.9 で API が変更されました。

  • BlockFactory は ViewFactory になりました
  • scope.$new は scope.createChild(scope.context) のようになりました
  • inspector.createChild(modules) は、モジュールのリストを必要とするようになりました (単一のモジュールではなく)

AngularDart 0.10.0 では、次の変更が導入されています。

  • NgShadowRootAware は ShadowRootAware ではありません
  • ..value() は ..bind(., toValue: .) になりました

したがって、pavelgj のコードは次のようになります。

class AppComponent extends ShadowRootAware {
  Compiler compiler;
  Injector injector;
  Scope scope;
  DirectiveMap directives;

  AppComponent(this.compiler, this.injector, this.scope, this.directives);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    ViewFactory template = compiler([inner], directives);
    Scope childScope = scope.createChild(scope.context);
    Injector childInjector = 
        injector.createChild([new Module()..bind(Scope, toValue: childScope)]);
    template(childInjector, [inner]);
    }
  }
于 2014-03-26T23:22:18.303 に答える