Angular Route Guards : CanActivate和CanActivateChild的差異

在幾天前，同事向我請教關於Angular Router的CanActivate和CanActivateChild的差別，所以想寫這篇文章來說明CanActivate和CanActivateChild的路由行為。
在Angular的Route Guards包含以下四種 :

• CanActivate : 用於控制是否允許進入路由。
• CanActivateChild :用於控制是否允許進入子路由。
• CanDeactivate : 用於控制是否允許離開路由。
• CanLoad : 用於控制是否允許延遲載入Module。
• Resolve : 用於在路由啟動ㄉ之前取得路由資料。

由上可知，雖然CanActivate和CanActivateChild同是用於控制是否允許進入路由，但CanActivateChild只針對子路由，其行路由為會有些不同。
以下面例子來說:
以為CanActivate例，當我們第一次拜訪A/B，Guard_1和Guard_2都會被執行，但是如果我們接著導向A/C，此時只有Guard_2會被執行。
那如果我們又接續著導向E/F會怎樣呢 ? 答案是Guard_1和Guard_2都會被執行，因為A/C導向至A/C並不是子路由的切換，所以Guard_1也會被執行。

const routes: Routes = [{
    path: 'A',
    canActivate: [
        Guard_1
    ],
    children: [
        {
            path: 'B',
            component: B_Component,
            canActivate: [
                Guard_2
            ]
        },
        {
            path: 'C',
            component: C_Component,
            canActivate: [
                Guard_2
            ]
        }
    ]
},{
    path: 'E',
    canActivate: [
        Guard_1
    ],
    children: [
        {
            path: 'F',
            component: F_Component,
            canActivate: [
                Guard_2
            ]
        }
    ]
}];

由上述CanActivate例子我們可以知道，當父路由使用CanActivate，不管怎麼切換子路由，其Guard都不會被執行。
那如果我們想要切換子路由時執行Guard，就必須使用CanActivateChild讓子路由都能夠套用Guard。
如下面的例子，當子路由被切換時，Guard_1和Guard_2都會被執行。

const routes: Routes = [{
    path: 'A',
    canActivateChild: [
        Guard_1
    ],
    children: [
        {
            path: 'B',
            component: B_Component
        },
        {
            path: 'C',
            component: C_Component
        }
    ]
}];