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

Question

我需要创建一个新创建的Angular2应用程序的类图。我知道为用C＃编写的.NET应用程序创建类图的基本原理，但从未使用过基于Angular2架构的.NET应用程序。

场景1：依赖服务的类

代码：

@Injectable()
export class AmendmentAccountComponent implements OnInit 
{

    constructor(private accountService: AccountService) 
    {

    }
}

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

与此article

中的相似性相比较

依赖是在类图中显示（我解释过的）的正确方法吗？

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

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

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

因此，此组件的子项是BookingsComponent。我该如何在类图中绘制这种关系？只是正常的关联？

希望有人可以提供帮助，特别是方案2，我不知道如何绘制它。

Answer 1

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

场景2：在这种情况下，从PageComponent到BookingComponent的依赖也是合适的。正常关联（箭头指向BookingComponent）意味着PageComponent的实例可能具有到BookingComponent的实例的链接（在UML意义上） 。在Angular2中，仅当类PageComponent具有类型为BookingComponent的字段时才使用关联。

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

Answer 2

1）依赖是正确的链接：

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