Classdiagram Angular2，注入和使用路由时的关联或依赖

Question

我需要为我新创建的 Angular2 应用程序创建一个 class 图。我知道为用 C# 编写的 .NET 应用程序创建 class 图表的基础知识，但从未基于 Angular2 架构制作图表。

场景 1：Class 依赖服务

代码：

@Injectable()
export class AmendmentAccountComponent implements OnInit 
{

    constructor(private accountService: AccountService) 
    {

    }
}

假设我创建了一个名为 AccountComponent 的组件。该组件需要一个名为 AccountService 的服务，该服务将被注入到构造函数中。现在我正在考虑绘制一个从 AccountComponent 到 AccountService 的依赖关系（不是关联），表明它在执行组件之前需要这个依赖关系。

与它在 article

中的外观相比的依赖关系

依存关系是 class 图中显示（我解释的内容）的正确方式吗？

场景二：组件使用路由（RouteConfig）

假设我有一个名为 PageComponent 的组件。它有一个同名的 class。该组件得到了一些路由，就像在此处的 RouteConfig 代码中所表达的那样：

@RouteConfig([
    { path: '/', name: 'Bookings', component: BookingsComponent },
    { path: '/bookings', name: 'Bookings', component: BookingsComponent, useAsDefault: true },
])

所以这个组件的子组件是 BookingsComponent。我应该如何在 class 图表中绘制这种关系？只是正常关联？

希望有人能帮忙，特别是场景2，我不知道怎么画。

Answer 1

1)依赖是对的link:

2) 你的 RouteConfig 是一个关联数组的数组。关联数组本身似乎传输某种结构。这种结构可以很好地呈现为单个 class。所以我想出了这张照片：

Answer 2

场景 1：是的，从 AccountComponent 到 AccountService 的依赖是正确的。

场景 2：从 PageComponent 到 BookingComponent 的依赖在这种情况下也是合适的。正常关联（箭头指向 BookingComponent）将意味着 PageComponent 的实例可以有一个 link（在 UML 意义上）到 BookingComponent 的实例。在 Angular2 中，只有当 class PageComponent 有一个 BookingComponent 类型的字段时，我才会使用关联。

有关 Angular 软件的 UML 建模的详细信息，请参阅 Technical design in UML for AngularJS applications

Classdiagram Angular2，注入和使用路由时的关联或依赖

Classdiagram Angular2, association or dependency when injection and using routing

uml

class-diagram

angular