dart - 如何在 Angular.Dart 中以编程方式添加组件？

Question

我想根据从 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]); 
  }

}

Answer 1

AngularDart 0.9.9 中的 API 已更改:

• BlockFactory 现在是 ViewFactory
• scope.$new 现在似乎是scope.createChild(scope.context)
• injector.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]);
    }
  }