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

[更新]请阅读注释历史记录以了解上下文。如何在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(); 
}

我再添我-app标记为index.html的，如：

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

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

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

如果我把相同的组件的两个实例，每个人都会保持自己的成员变量，但如果我注入服务为一体的组件，然后将所有组件实例共享相同的服务实例，我发现唯一明显的区别是他们使用不同的注释（除此之外，他们都导出一个类）：@Component和@Injectable，一个在指令数组中，另一个在提供者数组中。 我不知道这2个注释是否告诉角度如何处理实例或指令数组和提供者数组呢？

来源

2016-03-07 Kuan

评论可以被删除，如果该意见包含对回答这个问题，应该比你反映的是信息到这个问题的重要信息。 – Tezra

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)?

来源

2016-03-07 18:56:25

谢谢，所以这意味着只有根应用程序组件可能有这个限制问题？如果我把组件放在应用程序组件中，那么一切都好？ – Kuan

是的，它只是在引导阶段。您可以在Angular2应用程序中使用您想要的组件;-) –

您也可以在同一页面中引导几个不同的组件... –

这是目前不支持。您需要用bootstrap(AppComponent)初始化每个根组件，但只有在两个组件具有不同的选择器时才起作用。

也https://github.com/angular/angular/issues/7136

来源

2016-03-07 18:56:44

是的，它适用于其他组件内的组件。根组件还有其他限制https://github.com/angular/angular/issues/1858 –

谢谢，我想知道Angular2如何决定何时生成新的或重用现有的实例？那是因为如果我使用'@ Injectable'或使用'@ Componnet'？ – Kuan

角度DI是分层的。每个组件，指令，管道......都有自己的注入器，每个子组件注入器都是父组件注入器的子组件。 'bootstrap（）'创建根注入器。当DI查找依赖关系时，它会从请求组件向root进行迭代。当它找到提供者时，它从那里请求实例。发现提供者的注入器保留了一个依赖关系的实例，并且每次都返回相同的结果。如果你得到一个新的实例，或者取决于你注册提供者的地方。 –

-1

见据我所知，除了主要的组件，您可以在同一个HTML网页使用任何其他部件多次。

可以通过使用@input装饰声明在HTML中的选择元素/指令的属性，并通过使用@input装饰得到的组件，属性的值达到这个

进口{组件，输入}来自“ angular2 /芯“;

@Component({ 
    selector: "my-app", 
    template: "<div>{{title}}</div>" 
}) 
export class AppComponent { 
     @Input() title; 
}  
    <body> 
    <my-app title = "somedata1">Loading...</my-app> 
    <my-app title = "somedata2">Loading...</my-app> 
    </body>

能在这个环节上找到一个例子

Angular2 .. Using the same component to show different data on the same page depending on service response

来源

2017-06-07 14:22:17 praveen

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

回答

相关问题