css - Angular 2 模块/应用程序结构

Question

我只是在评估如何将 Angular 2 用于某些共享某些服务和组件的 Web 应用程序。据我了解，我可以创建组件库来共享组件。每个组件可能有它自己的 css，它只影响组件。共享服务的最佳方法是什么？

我目前正在使用 Angular 1 和 Bootstrap 组件。一个要求是，我们的应用程序应该提供为其创建自定义皮肤的可能性。通过添加 java 脚本片段，该应用程序本身应该可以在每个网站上运行。这与仅在一个特定网站上运行的其他 SPA 有很大不同。目前我们提供了一个 bootstrap less 变量文件，可以自定义和上传以通过 less 创建新皮肤。这样做的好处是，几乎每个网页设计师都知道 bootstrap 是如何工作的。但这也意味着 css 是全局定义的，而不是在组件内部。以非常简单的方式为人们提供自定义 Angular 2 的 css 的最佳方法是什么？

在我们的例子中，可能需要两个应用程序相互交互。例如，假设您有一个酒店预订应用程序和一个航类预订应用程序。在用户预订航类后，您可能还想在同一页面内提供酒店预订应用程序。两个应用程序可能共享日期范围选择表单或结果页面等组件。谈论不同的应用程序是否正确，或者我只创建两个模块(酒店 + 航类)？延迟加载如何只加载当前应用程序所需的部分以减少大型元素的初始加载时间？

有什么想法是那种元素的最佳结构吗？

Answer 1

我想象的方式是。

有两条主要路线的应用

/Flights
|--Holds other routes for the Flights part of the application
|i.e. 
/Flights/flights
/Flights/seating
/Flights/payment

/Hotels
|--Holds other routes for the Hotels part of the application
|i.e. 
/Hotels/booking
/Hotels/payment

因此，这将是一个具有两个主要路由的应用程序，这两个路由根据其特定需求嵌套路由。