如何在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
• 范围.$ 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]);
    }
  }

Answer 2

这将是块API的正确使用.

class AppComponent extends NgShadowRootAware {
  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>");    
    BlockFactory template = compiler([inner], directives);
    Scope childScope = scope.$new();
    Injector childInjector = 
        injector.createChild(new Module()..value(Scope, childScope));
    template(childInjector, [inner]);
  }
}

此外,如果您需要重新编译内部模板,请确保执行childScope.$destroy()上一个模板childScope.