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

Question

是否可以定义一个角度飞镖组件，然后以编程方式创建该组件的实例并将其添加到您的网页？ 我希望可能会有这样的事情：

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);
}

是否可以通过编程方式创建有角度的Web组件并将其添加到页面中，也许就像上面的伪示例一样，如果可以的话，又如何呢？

Answer 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);
}