angular - Typescript 和 LifeCycle Hooks 中 Angular 2 的 UML 类图

Question

我正在寻找一些关于 Typescript 中 Angular 2 的 UML 类图的示例。

我不确定如何定义 生命周期 Hook 在图中，因为 on 通常使用

export class BlahComponent implements OnInit {
}

而不是 inherits 这个词因此，至少在 LifeCycle Hooks 和 Class 本身之间没有继承。

这也提出了一个问题， 之间是否应该有任何联系(关系)。父子组件类 在 UML 图中。这是代替的，因为子组件不 inherit父组件，但只期望更改它们之间的共享变量。

在我看来，Angular 的 UML 类图通常只是类，与任何其他类组件没有任何明确的联系。我希望有一些关于这个主题的清晰和例子。

执行

根据 Angular Documentation for onChanges这是一个接口(interface)我创建了一个示例图如下



它认为来自 UML 1.4.2 [ source ] 起 对象图已过时，因此我创建了 <<use>>用于显示类中的类实例的标记。这是错误的，但只是作为示例，因为 EventEmitter根据文档是一个类，并且倾向于使用 event = new EventEmitter()在代码中。

笔记

上图使用 PlantUML 创建它提供了相应地更改图表的方法。

Answer 1

您的图表几乎是正确的，但是≪use≫-箭头指向错误的方向。类 ExplorativeSearchFilterComponent 指的是 EventEmitter，而不是相反。在大多数情况下，≪use≫-箭头从调用者指向被调用者，但在这种情况下，EventEmitter 不知道它在调用谁，而 ExplorativeSearchFilterComponent 主动使用 EventEmitter 来确保它被调用。

有关在 Angular 应用程序中使用 UML 的更多信息，请参阅我的白皮书:Technical design in UML for Angular applications .