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

Posted 2023-03-13

【中文标题】Ionic 4 迁移：Ionic 3 生命周期事件/导航守卫的 Angular 等价物是啥？

【英文标题】：Ionic 4 Migration : What are the Angular equivalent of Ionic 3 lifecycle events/nav guards?Ionic 4 迁移：Ionic 3 生命周期事件/导航守卫的 Angular 等价物是什么？

【发布时间】：2019-06-17 23:14:55

【问题描述】：

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

ionViewDidLoad ionViewWillEnter [未替换] ionViewDidEnter [未替换] ionViewWillLeave [未替换] ionViewDidLeave [未替换] ionViewWillUnload ionViewCanEnter ionViewCanLeave

请帮我把上面的和

匹配起来

ngOnChanges() ngOnInit() ngDoCheck() ngAfterContentInit() ngAfterContentChecked() ngAfterViewInit() ngAfterViewChecked() ngOnDestroy()

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

【问题讨论】：

添加了以下列表

【参考方案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]

【讨论】：

刚刚偶然发现同样的事情，ionViewDidEnter 的等效 Angular 钩子是什么

【参考方案2】：

ionViewDidLoad 替换为 ngOnInit ionViewWillEnter [未替换] ionViewDidEnter [未替换] ionViewWillLeave [未替换] ionViewDidLeave [未替换] ionViewWillUnload 替换为 ngOnDestroy ionViewCanEnter 被 CanActivate 取代 ionViewCanLeave 被 CanDeactivate 取代