Question

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

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

Answer 1

只需为每个组件调用bootstrap

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“应用程序”之间轻松进行通信。另请参阅detect change of nested property for component input

Angular 2：如何将单独的，不相关的组件加载到页面

1 个答案: