小编kae*_*aeh的帖子

我们的团队目前正在尝试一种 Angular 架构，我也想从其他人那里得到一些建议。

“基本” Angular 架构应该是这样的

角度架构

组件有一个视图、它的逻辑和它的依赖关系。

但是我们想要做一种更可靠的方法，即“一个类、函数或方法应该只有一个职责”。所以我们认为我们可以让组件类只管理视图并将其逻辑导出到强链接服务。我们的架构现在看起来更像这样

我们的 Angular 架构

但是使用强链接服务来导出组件的逻辑感觉有些奇怪，我们在团队中讨论过，Angular 服务的原则应该是执行业务逻辑，例如调用 API 并且应该在任何地方都可用，而不是强链接链接到类似组件的东西。

所以这就是我在这里的原因，我们希望从开发社区获得关于我们架构的建议，并确保我们不会朝着不稳定/错误的方向前进（请告诉我们您是否这么认为以及为什么）

这是我们所做的一个例子

我们有一个应该显示产品列表的组件。我们将逻辑导出到两个服务：

• ProductListItemService管理列表的一个项目
• ProductsListService管理列表本身

你可以想象这将很难在其他地方使用它，除非我们在另一个视图中需要相同的列表

我们使用了 SOLID 的控制反转，并使用 TokenInjection 注入了我们的服务，允许我们使用接口

该组件除了调用它的逻辑服务并处理视图（显示加载器，更改变量）之外什么都不做。给你代码

// IMPORTS ARE HERE

@Component({
    selector: 'app-products-list',
    templateUrl: './products-list.component.html',
    styleUrls: ['./products-list.component.css'],
    providers: [{
        provide: BASE_PRODUCT_LIST_ITEM_SERVICE_TOKEN, // This is a token used to allows us to inject an interface
        useClass: ProductListItemService,
    },
    {
        provide: PRODUCTS_LIST_SERVICE_TOKEN, // This is a token used to allows us to inject an interface
        useClass: …