ionic-framework - ionic 4 迁移 : What are the Angular equivalent of Ionic 3 lifecycle events/nav guards?

Question

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

ionViewDidLoad

ionViewWillEnter [未替换]

ionViewDidEnter [未替换]

ionViewWillLeave [未替换]

ionViewDidLeave [未替换]

ionViewWillUnload

ionViewCanEnter

ionViewCanLeave

请帮我匹配上面的

ngOnChanges()

ngOnInit()

ngDoCheck()

ngAfterContentInit()

ngAfterContentChecked()

ngAfterViewInit()

ngAfterViewChecked()

ngOnDestroy()

编辑:我确实经历过 Ionic 4 router-outlet文档。

Answer 1

ionViewDidLoad => ngOnInit()

ionViewWillUnload => ngOnDestroy()

来自 Angular Docs :

ngOnInit()
Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

ngOnDestroy()

Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

对于 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]}