angular2 bootstrap是否可以像在角度1.x中那样动态地定位元素

2023年3月10日 263次阅读

假设我们要在运行时添加一些DOM元素：

var element = document.createElement('app');
element.id = 'app1';
document.getElementsByTagName('body')[0].appendChild(element);

var element2 = document.createElement('app');
element2.id = 'app2';
document.getElementsByTagName('body')[0].appendChild(element2);

Angular 1.x引导程序方法可以针对特定的DOM元素,因此您可以在它们上引导Angular：

angular.bootstrap(element, ['myApp']);
angular.bootstrap(element2, ['myApp']);

在Angular2中,bootstrap方法接受一个Component而不是一个元素,并使用组件的选择器来定位一个要引导的元素,从构建2.0.0-alpha.26开始,它只引导它找到的第一个匹配：

import { Component, bootstrap } from 'angular2/angular2';

@Component({ selector: 'app' })
export class MyApp { }
bootstrap(MyApp);

所以,有人说,有没有人知道是否有一种方式(或将成为一种方式)引导类似于1.x,允许您动态地将角度应用于动态元素？

最佳答案 这个问题的一部分 – 与引导相关的问题在这里得到解答
How use an AngularJS 2 component multiple times in the same page其余的答案取决于你想要如何创建元素.

例如,动态添加组件的一种方法是从与应用程序关联的数据中执行此操作.如果数据发生变化(例如数组),则使用NgFor将组件插入DOM

<template *ng-for="#item of #items">
    <my-component>{{item.name}}</my-component>
</template>

这是Angular 2代码中的注释

https://github.com/angular/angular/blob/master/modules/angular2/src/directives/ng_for.ts#L7

点赞