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

我想根据从AJAX调用接收到的一些信息动态构建一个组件树

如何从其他组件的内部以编程方式将组件添加到DOM中？我有

，我想根据一些逻辑，插入一个

。下面的代码只是将元素

插入DOM，而不是实际的

表示

@NgComponent(
选择器：“外部组件”，
templateUrl:'view/outer_component.html'，
cssUrl:'view/outer_component.css'，
出版物：“外部”
)
类AppComponent扩展了NgShadowRootAware{
void onShadowRoot（ShadowRoot ShadowRoot）{
DivElement-inner=shadowRoot.querySelector（“#inner”）；
inner.appendHtml（“”）；
}
}

更新： 我成功地用以下方式正确渲染了内部组件，但我仍然不确定这是否是正确的方式：

class AppComponent扩展了NgShadowRootAware{
编译程序；
注入器；
AppComponent（this.compiler，this.injector）；
void onShadowRoot（ShadowRoot ShadowRoot）{
DivElement-inner=shadowRoot.querySelector（“#inner”）；
inner.appendHtml（“”）；
BlockFactory模板=编译器（内部.nodes）；
var块=模板（注入器）；
inner.replaceWith（block.elements[0]）；
}

---

}这将是块API的正确使用

class AppComponent扩展了NgShadowRootAware{
编译程序；
注入器；
范围；
定向映射指令；
AppComponent（this.compiler、this.injector、this.scope、this.directives）；
void onShadowRoot（ShadowRoot ShadowRoot）{
DivElement-inner=shadowRoot.querySelector（“#inner”）；
inner.appendHtml（“”）；
BlockFactory模板=编译器（[内部]，指令）；
Scope-childScope=Scope.$new（）；
喷油器儿童喷油器=
createChild（新模块（）…值（范围，childScope））；
模板（childInjector，[内部]）；
}
}

此外，如果需要重新编译内部模板，请确保在上一个

childScope

编辑中执行

childScope.$destroy（）

包包含此装饰器/指令，如

bwu-safe-html

----

我使用自定义指令来实现这一点

@NgDirective(
选择器：“[my bind html]”
)
类MyBindHtmlDirective{
静态dom.NodeValidator验证器；
元素_元素；
编译器&u编译器；
注入器(u注入器),；
方向图_DirectiveMap；
MyBindHtmlDirective（this.\u元素，this.\u注入器，this.\u编译器，this.\u directiveMap）{
validator=new dom.NodeValidatorBuilder.common（）
…allowHtml5（）
…Allowages（）；
}
@NgOneWay（'my-bind-html'）
设定值（值）{
如果（值==null）{
_element.nodes.clear（）；
返回；
}
_element.setInnerHtml（（value==null？“”：value.toString（）），
验证器：验证器）；
if（值！=null）{
_编译器（_element.childNodes，_directiveMap）（_injector，_element.childNodes）；
}
}
}

它可以像这样使用

my bind html='ctrl.somehtml'

角度问题

---

我创建了一个问题，将此功能包含到Angulars

ng bind html中（已拒绝）
AngularDart 0.9.9中的API已更改：


BlockFactory现在是ViewFactory
scope.$new现在似乎是scope.createChild（scope.context）
createChild（模块）现在需要模块列表（而不是单个模块）

AngularDart 0.10.0引入了以下更改：


NgShadowRootAware不是ShadowRootAware
..value（）现在是..bind（，toValue:）

pavelgj的代码现在看起来是这样的：

class AppComponent扩展了ShadowRootAware{
编译程序；
注入器；
范围；
定向映射指令；
AppComponent（this.compiler、this.injector、this.scope、this.directives）；
void onShadowRoot（ShadowRoot ShadowRoot）{
DivElement-inner=shadowRoot.querySelector（“#inner”）；
inner.appendHtml（“”）；
ViewFactory模板=编译器（[inner]，指令）；
Scope-childScope=Scope.createChild（Scope.context）；
喷油器儿童喷油器=
createChild（[new Module（）…bind（Scope，toValue:childScope）]；
模板（childInjector，[内部]）；
}
}
由于角度省道库中的更改，上述代码示例的工作时间更长。特别是ViewFactory.call，它不再使用注入器，而是使用示波器和定向注入器。我试着去适应上面的内容，我离得很近。组件出现了，但是没有一个绑定被替换（例如，我看到{{cmp.value}}）

这是我正在使用的代码。我认为这里的问题是DirectiveInjector是以null的形式出现的

void main（）{
IBMModule=new IBMModule（）；
AngularModule AngularModule=新的AngularModule（）；
喷油器喷油器=应用程序工厂（）
.addModule（模块）
.run（）；
AppComponent-AppComponent=injector.get（AppComponent）；
appComponent.addElement（“”）；
}
@可注射（）
类AppComponent{
NodeValidator验证器；
编译器&u编译器；
定向注入器(u注入器),；
方向图_DirectiveMap；
nodetree消毒剂_nodetree消毒剂；
范围_范围;；
AppComponent（此.\u注入器、此.\u编译器、此.\u directiveMap、此.\u作用域、此.\u NodeTreeSaninitizer）{
validator=new NodeValidatorBuilder.common（）
..allowCustomElement（“BRAZOS-INPUT-STRING”）
…allowHtml5（）
…允许模板（）；
}
void addElement（字符串元素html）{
DivElement容器=查询选择器（“容器”）；
DivElement内部=新的DivElement（）；
setInnerHtml（elementHTML，validator:validator）；
ViewFactory ViewFactory=_compiler.call（[inner]，_directiveMap）；