Question

我在角度2处创建了简单的页面我试图在同一页面多次添加相同的组件（例如：“my-app”），第一个正确加载，但剩下的没有（例如下面：显示“Loading ...”），

这里有一些代码：-index.html -

 <body>
    <my-app>
    loading...
  </my-app>
  <my-app>
    loading...
  </my-app>
  <my-app>
    loading...
  </my-app>
  </body>

- app.ts - ：

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

这里的完整演示：

http://plnkr.co/edit/18afY0M19JHML6Ve1huc

请帮助

Answer 1

如果我可能会问，为什么要尝试加载同一组件的多个版本？如果它是一个对象数组，最好将整个数组加载到单个组件中，然后使用* ngFor循环单独显示每个组件。所以不要有多个<my-app>元素，而是有一个<apps-container>元素（或任何名称，在其中你可以有类似的东西：

<my-app *ngFor="#app of apps"> </my-app>

然后，对于组件中更改该组件的任何功能，将所选组件发送到该功能，以便特别编辑该组件。
这方面的一个例子是angulario docs https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

我编辑了你的例子，告诉你我的意思 http://plnkr.co/edit/GzmiViYLWqMWZfta6Mck

更新：好的，这是一个使用iFrames的更新示例，基本上可以完成工作。基本上，组件作为iFrame加载，因此每个组件都与下一个组件分开 http://plnkr.co/edit/xWKGS6

in angular2如何在一个页面中加载多个组件

1 个答案: