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

发布时间：2020-12-17 08:11:31 所属栏目：安全来源：网络整理

导读：我想动态构建一个基于AJAX调用的一些信息的组件树。如何从其他组件的内部向DOM中编程添加一个组件？我有 outer-comp并且我想，基于一些逻辑，插入 inner-comp。以下代码只插入元素 inner-comp / inner-comp到DOM，而不是实际的 inner-comp表示。 @NgCompone

我想动态构建一个基于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]); 
  }

}

这将是块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上执行childScope。$ destroy()。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!