クラス図Angular2、注入とルーティングを使用するときの関連性または依存性

Question

私は新しく作成したAngular2アプリケーションのクラス図を作成する必要があります。私は、C＃で書かれた.NETアプリケーションのクラス図を作成する基本を知っていますが、Angular2アーキテクチャに基づいたアプリケーションを作成したことはありません。

シナリオ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では、どのように描くのか分かりません。

2）あなたRouteConfigは、連想配列の配列である：

Answer 1

シナリオ1：はい、AccountServiceのにAccountComponentから依存関係が正しいです。

シナリオ2：この場合もPageComponentからBookingComponentへの依存が適切です。通常の関連付け（BookingComponentを指している矢頭）は、インスタンスのPageComponentが、 BookingComponentの（UMLの意味での）リンクを持つことができることを意味します。 Angular2では、PageComponentクラスがBookingComponent型のフィールドを持つ場合にのみ、関連付けを使用します。角度のソフトウェアのためのUMLモデリングの詳細については

、私はあなたが作った最初の画像を理解し、私は第二についてとてもよく分からないTechnical design in UML for AngularJS applications

Answer 2

1）依存性は、右のリンクです。連想配列そのものは、ある種の構造を運んでいるようです。この構造は、単一のクラスとして提示することができます。だから私はこの絵を思い付くしたい：