angular.dart 如何以编程方式创建自定义组件并添加到页面？答案

【问题标题】：angular.dart how to create a custom component programmatically and add to page?angular.dart 如何以编程方式创建自定义组件并添加到页面？
【发布时间】：2014-04-20 15:12:13
【问题描述】：

是否可以定义一个 angular-dart 组件，然后以编程方式创建该组件的实例并将其添加到您的网页中？我希望可能有类似的东西：

import 'package:web_sandbox/web_sandbox.dart';
import 'package:angular/angular.dart' as ng;

void main() {
  document.body.appendHtml('<web-sandbox-component></web-sandbox-component>');
  var node = document.body.query('web-sandbox-component');
  ng.compile(node);
}

是否可以通过编程方式创建一个 Angular Web 组件并将其添加到页面中，可能就像上面的伪示例一样，如果是的话，如何？

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

我认为 Angular 不可能做到这一点。

您可以在 DOM 中添加一个 HTML 标记 <web-sandbox-component> 并告诉 Angular 它应该处理这个新的 HTML，然后 Angular 会为此标记实例化 Angular 组件（这就是您链接的问题所在）。

我不认为这是一种限制。有没有你想做的事情，但这种方式似乎不可能？

编辑

您在 main 中的代码应如下所示：

我的文档看起来像

...
<body>
  <div id="mydiv"></div>
  ...
</body>

我将<web-sandbox-component> 附加到 div

main() {
  print('main');
  ng.Injector inj = ngaf.applicationFactory().addModule(new MyAppModule()).run();
  var node = dom.querySelector('#mydiv');
  node.append(new dom.Element.html('<web-sandbox-component></web-sandbox-component>', validator: new dom.NodeValidatorBuilder()..allowCustomElement("web-sandbox-component")));
  ng.Compiler compiler = inj.get(ng.Compiler);
  ng.DirectiveMap directiveMap = inj.get(ng.DirectiveMap);
  compiler(node.childNodes, directiveMap)(inj, node.childNodes);
}

【讨论】：

不，这基本上是一样的，我只是没有完全理解另一个问题是关于扩展 NgShadowDomAware 的原因
implements NgShadowDomAware 只是告诉 Angular 在 shadow DOM 准备好时调用onShadowRoot。这基本上是组件内容准备好与之交互的时间。
所以如果我调用document.body.appendHtml('<web-sandbox-component></web-sandbox-component>');，角度会自动检测 dom 更改并使用我的组件模板 shadow dom 填充它吗？
不，你必须在新的 HTML 上调用 compile 才能让 Angular 对其进行“处理”。这就是您链接的问题的答案。
谢谢，看起来很棒，我回家后会尝试并接受答案，仅适用于那些不知道（如我）什么是 MyAppModule 以及如何操作的人我定义一个？