我想动态构建一个基于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的正确使用。
原文链接：https://www.f2er.com/angularjs/144421.htmlclass 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()。
