Angular 角度2：如何将独立的、不相关的组件加载到页面上

我在一个页面上有两个完全不相关的组件。我不想将它们作为父模板下的子组件加载。如何在一个页面上加载这两个文件

<section>
<h1>Heading</h1>
<the-first-component></the-first-component>
</section>

(lots of html)

<main>
<h1>Another heading</h1>
<the-second-component></the-second-component>
</main>

(lot more html)

标题
（大量html）
另一标题
（更多html）

只需为每个组件调用

引导程序

bootstrap(AppComponent1, [ /* providers here */]);
bootstrap(AppComponent2, [ /* providers here */]);

例如，如果您想共享数据，可以使用共享服务

@Injectable()
class MySharedService {
}

var shared = new MySharedService();

bootstrap(AppComponent1, [provide(MySharedService, {useValue: shared}]);
bootstrap(AppComponent2, [provide(MySharedService, {useValue: shared}]);

当

AppComponentx

或其子组件之一或另一个服务具有以下构造函数参数时，使用这种方法

constructor(private myShared: MySharedService) {}

然后，您可以在任何地方使用相同的全局实例，以便在页面上的不同Angular2“应用程序”之间轻松通信。

---

另请参见每个组件的

只需调用

引导

bootstrap(AppComponent1, [ /* providers here */]);
bootstrap(AppComponent2, [ /* providers here */]);

例如，如果您想共享数据，可以使用共享服务

@Injectable()
class MySharedService {
}

var shared = new MySharedService();

bootstrap(AppComponent1, [provide(MySharedService, {useValue: shared}]);
bootstrap(AppComponent2, [provide(MySharedService, {useValue: shared}]);

当

AppComponentx

或其子组件之一或另一个服务具有以下构造函数参数时，使用这种方法

constructor(private myShared: MySharedService) {}

然后，您可以在任何地方使用相同的全局实例，以便在页面上的不同Angular2“应用程序”之间轻松通信。

---

另请参见

另请参见如果我对所有组件调用引导，但它们不在页面上，我将得到一个错误。有没有办法避免这种情况？我的目标是拥有多个可重用组件，这些组件可以嵌入到page@pfried我想在

try

/

catch

中包装

bootstrap（…）

或使用中所述的自定义错误处理程序应该可以满足您的需要。另外，请参阅我是否对所有组件调用bootstrap，但它们不在页面上，我会得到一个错误。有没有办法避免这种情况？我的目标是拥有多个可重用组件，这些组件可以嵌入到page@pfried我想在

try

/

catch

中包装

引导（…）

，或者使用如中所述的自定义错误处理程序应该可以满足您的需要。