Ionic 4 迁移：Ionic 3 生命周期事件/导航守卫的 Angular 等价物是什么？

Question

我在进行 Ionic 3 到 4 迁移时遇到了困难。官方migration guide 要求我们使用“正确的 Angular 替代方案”。谁能告诉我以下Ionic 3 lifecycle-hooks 的等效Angular lifecycle-hooks 替代品。

1. ionViewDidLoad
2. ionViewWillEnter [未替换]
3. ionViewDidEnter [未替换]
4. ionViewWillLeave [未替换]
5. ionViewDidLeave [未替换]
6. ionViewWillUnload
7. ionViewCanEnter
8. ionViewCanLeave

请帮我把上面的和

匹配起来

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy()

编辑：我确实浏览过Ionic 4 router-outlet docs。

Answer 1

ionViewDidLoad => ngOnInit()

ionViewWillUnload => ngOnDestroy()

来自Angular Docs：

ngOnInit()
在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

ngOnDestroy()

在 Angular 销毁指令/组件之前进行清理。取消订阅 Observables 并分离事件处理程序以避免内存泄漏。

对于 ionViewCanEnter() 和 ionViewCanLeave()，您必须按照文档中的建议使用 Router Guards。 例如。如果您想保护路由免受未经身份验证的用户的攻击，您必须首先创建服务文件以检查身份验证

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (isAuthenticated) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login']);
    return false;
}
}

然后在你的路由路径中使用 canActivate 属性中的服务：

{path:'home',component:HomeComponent,canActivate:[AuthGuard]}

Answer 2

1. ionViewDidLoad 替换为 ngOnInit
2. ionViewWillEnter [未替换]
3. ionViewDidEnter [未替换]
4. ionViewWillLeave [未替换]
5. ionViewDidLeave [未替换]
6. ionViewWillUnload 替换为 ngOnDestroy
7. ionViewCanEnter 被 CanActivate 取代
8. ionViewCanLeave 被 CanDeactivate 取代