angular - 如何在 Angular2 中注入(inject)相同组件的新实例-6ren

angular - 如何在 Angular2 中注入(inject)相同组件的新实例

转载作者：太空狗更新时间：2023-10-29 17:35:05

[更新] 请阅读评论历史以了解上下文。

全部:

我是 angular2 的新手，当我按照它的快速入门指南操作时，有一个问题让我很困惑:

我将 app.component.ts 简化为:

import { Component } from "angular2/core";
@Component({
    selector: "my-app",
    template: "<div>{{title}}</div>"
})
export class AppComponent {
        title = "Tour of Heroes" + Math.random();
}

然后我将另一个 my-app 标签添加到 index.html 中，例如:

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

我想知道为什么第二个无法渲染？

与此相关的另一个问题是:

如果我放置同一个组件的两个实例，每个实例都会保留自己的成员变量，但是如果我将服务注入(inject)一个组件，那么所有组件实例都共享同一个服务实例，我发现唯一明显的区别是它们使用不同的注解(除此之外，它们都导出一个类):@Component 和@Injectable，一个在指令数组中，另一个在提供程序数组中。 我想知道这 2 个注释是否告诉 angular 如何处理实例或指令数组和提供程序数组？

最佳答案

Angular2 不允许在 HTML 页面中引导同一个组件两次。

但是，如果您希望在同一个 HTML 页面中，则可以引导不同的应用程序组件。

有关详细信息，请参阅此文档: