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

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组件并将其添加到页面中,也许就像上面的伪示例一样,如果可以的话,又如何呢?

===============>>#1 票数:3 已采纳

我认为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);
}

  ask by Daniel Robinson translate from so

未解决问题?本站智能推荐:

5回复

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

我想基于从AJAX调用接收的一些信息动态构建组件树。 如何以编程方式从其他组件内部向DOM添加组件? 我有<outer-comp> ,我希望,基于一些逻辑,插入一个<inner-comp> 。 以下代码只是将元素<inner-comp></in
1回复

Angular.Dart如何动态地将组件添加到DOM?

我的项目中有一个自定义的@NgComponent,如果我将它放在应用程序的静态HTML中,它就可以工作。 我想弄清楚的是如何动态地向DOM添加一个? 如果我构造我的Component的一个实例,它似乎不是Element类型,因此它不能直接添加到DOM中元素的子元素。 是否有另一种方法来构造
1回复

PolymerDart自定义元素,具有与Angular.dart模型的双向绑定

我设法双向,结合我Angular.dart模型使用的纸张元素bind-语法: <paper-input bind-value="item.name"></paper-input> 现在我想创建一个可以公开属性以进行双向绑定的自定义组件: @CustomTag('
1回复

使用6个模板参数创建Angular.Dart Cube组件

我正在尝试创建一个Angular.Dart组件,它旨在成为一个多维数据集。 多维数据集的每一侧都包含它自己的内部HTML,该组件的属性将设置哪一侧是当前可见侧。 (一次只有一方活跃) 我的问题是 - 如何创建一个接收6个模板参数的组件,每个组件都将作为特定的多维数据集端内部HTML
1回复

用法 在angular.dart组件?

这个答案中提到的方法: https : //stackoverflow.com/a/19818178/194642似乎不再起作用了。 如何在angular.dart组件中使用Web组件的元素? 现在,我希望以下html片段: 导致在#shadow-root中跟随:
1回复

引导轮播作为angular.dart组件?

我正在尝试在angular.dart组件中使用引导程序的轮播。 这是html: <div id="carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol
2回复

如何在angular.dart中装饰组件

我想提供一种可能性,可以使用装饰器以不同的外观和思想展示我的组件。 就像是: <body> <my-component my-decorator></my-component> </body> 。 @Component( s
1回复

Angular.dart的异步模块定义(AMD)?

我很好奇,想知道是否有可能使用Angular.dart(或通常的dart)进行异步模块定义,如果可以,那么请为这样的单页应用程序共享示例代码。
1回复

如何从Angular.Dart组件内部引用聚合物组件

我希望有人可以引导我朝正确的方向发展。 我将聚合物组件嵌入了Angular组件中。 我想从角度组件类的聚合物组件中调用一个方法。 如果可能的话,这有可能吗? querySelector尚未证明成功。 ang_comp.html: <div id='ilovePolymer'&
1回复

自定义Angular Dart组件包

我创建了一个要在我的主项目中使用的角度飞镖组件。 我正在使用路径包来引用它。 组件的构造函数(在dart文件中)被调用,但是出现错误,找不到.css和.html文件。 它在寻找它们的路径似乎存在,因此我不确定为什么找不到它们。 我在整个代码中都使用了其他自定义组件,但是没有与之关联的