如何在Angular.Dart中以编程方式添加组件？
如何在Angular.Dart中以编程方式添加组件？
提问于 2013-12-06 20:10:11
我想基于从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]);
}}
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-12-07 06:03:28
这将是对块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()。
Stack Overflow用户
发布于 2014-03-27 07:22:18
接口在AngularDart 0.9.9中发生了变化：
now is ViewFactory
- scope.$new is scope.createChild(scope.context)
- injector.createChild(modules)
- BlockFactory now is
- BlockFactory now
需要一个模块列表(而不是单个模块)
AngularDart 0.10.0引入了以下更改：
not is ShadowRootAware
- ..value() now is ..bind(.，toValue：.)
(.，toValue：.)not is ShadowRootAware
- ..value()now is..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]);
}
}Stack Overflow用户
发布于 2014-10-10 00:21:16
由于Angular Dart库中的更改，上面的代码示例可以在较长的时间内工作。具体地说，ViewFactory.call不再接受注入器，而是接受作用域和DirectiveInjector。我试着去适应上面的东西，并且我已经非常接近了。组件出现了，但没有替换任何绑定(例如，我看到{{cmp.value}} )。
这是我正在使用的代码。我认为这里的问题是DirectiveInjector是空的。
void main() {
IBMModule module = new IBMModule();
AngularModule angularModule = new AngularModule();
Injector injector = applicationFactory()
.addModule(module)
.run();
AppComponent appComponent = injector.get(AppComponent);
appComponent.addElement("<brazos-input-string label='test'/>");
}
@Injectable()
class AppComponent {
NodeValidator validator;
Compiler _compiler;
DirectiveInjector _injector;
DirectiveMap _directiveMap;
NodeTreeSanitizer _nodeTreeSanitizer;
Scope _scope;
AppComponent(this._injector, this._compiler, this._directiveMap, this._scope, this._nodeTreeSanitizer) {
validator = new NodeValidatorBuilder.common()
..allowCustomElement("BRAZOS-INPUT-STRING")
..allowHtml5()
..allowTemplating();
}
void addElement(String elementHTML) {
DivElement container = querySelector("#container");
DivElement inner = new DivElement();
inner.setInnerHtml(elementHTML, validator: validator);
ViewFactory viewFactory = _compiler.call([inner], _directiveMap);
Scope childScope = _scope.createChild(new PrototypeMap(_scope.context));
if (_injector == null) {
print("injector is null");
}
View newView = viewFactory.call(childScope, _injector);
container.append(inner);
newView.nodes.forEach((node) => inner.append(node));
}
}
class IBMModule extends Module {
IBMModule() {
bind(BrazosInputStringComponent);
bind(BrazosTextAreaComponent);
bind(BrazosButtonComponent);
bind(ProcessDataProvider, toImplementation: ActivitiDataProvider);
bind(AppComponent);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20423565
复制相关文章
相似问题