如何在Angular2中注入相同组件的新实例

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

所有：

我对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();
}

我在index.html中添加了另一个my-app标记,如：

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

我想知道为什么第二个不能渲染？

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

如果我把两个相同组件的实例,每个都保留自己的成员变量,但如果我将服务注入一个组件,那么所有组件实例共享相同的服务实例,我发现唯一明显的差异是它们使用不同的注释(其他除此之外,它们都导出一个类：@Component和@Injectable,一个在指令数组中,另一个在providers数组中.我想知道这两个注释是否告诉angular如何处理实例或指令数组和providers数组呢？

解决方法

Angular2不允许在HTML页面中两次引导相同的组件.

但是,如果您想要在同一个HTML页面中,则可以引导不同的应用程序组件.

有关详细信息,请参阅此文档：

> https://angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html(“引导多个应用程序”部分)

编辑

关于你的第二个问题,你需要知道@Component和@Injectable是装饰器.他们负责通过基于配置的元数据在构造函数中提供权限依赖实例来“包装”目标实例并允许依赖注入.

关于分层注入器,您可以查看此链接：

> What’s the best way to inject one service into another in angular 2 (Beta)?

如何在Angular2中注入相同组件的新实例

解决方法

相关文章