Question

[更新]请阅读评论记录以了解背景信息。

所有

我对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数组中。 我想知道这两个注释是否告诉角度如何处理实例或指令数组和提供者数组呢？

Answer 1

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

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

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

https://angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html（第34节;引导多个应用程序＆＃34;）

修改

关于第二个问题，您需要注意@Component和@Injectable是装饰者。他们负责＆＃34;包装＆＃34;通过基于配置的元数据在构造函数中提供权限依赖项实例来实现目标实例并允许依赖注入。

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

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

Answer 2

目前不支持此功能。您需要使用bootstrap(AppComponent)初始化每个根组件，但这仅在两个组件具有不同选择器时才有效。

另见https://github.com/angular/angular/issues/7136

Answer 3

据我所知，除了主要组件，您可以在同一个html页面中多次使用任何其他组件。

可以通过使用@Input装饰器来实现这一点在html中为你的选择器元素/指令声明一个属性，并使用@Input装饰器在Component中获取该属性的值

从＆＃34; angular2 / core＆＃34;;

导入{Component，Input}

@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

如何在Angular2

3 个答案: