如何以角度创建“ngOnActive”生命周期挂钩？

Posted 2023-03-13

【中文标题】如何以角度创建“ngOnActive”生命周期挂钩？

【英文标题】：how to create "ngOnActive" life cycle hook in angular?

【发布时间】：2019-01-12 16:02:13

【问题描述】：

我希望当我的组件在主页上处于活动状态时调用生命周期挂钩。

它的登录页面。

当我的组件在主页上时，即处于活动状态时，我想查看我是否已经拥有以前登录的登录令牌，并根据结果我想导航到不同的页面。

是否有任何 `ngOnActive' 钩子，如果没有，那么如何创建它？

或者有没有其他方法可以做到这一点？

我的代码：

import  Component, OnInit  from '@angular/core';
import  NgForm  from '@angular/forms';
import LoginService from './login.service';
import TokenService from '../data/token.service';
import Router from '@angular/router';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginService]
)
export class LoginComponent implements OnInit 

  constructor(private loginService: LoginService, private tokenService: TokenService, private router: Router)  

  ngOnInit() 
    if (this.tokenService.getToken() !== '') 
      console.log(this.tokenService.tk);
      this.router.navigate(['/admin']);
    
  
  onSubmit(form: NgForm) 
    this.loginService.login(form.value.email, form.value.password);
  

【问题讨论】：

您可以创建一个函数即：activate()，然后在组件（控制器）范围内调用它

组件可见时应该调用

在使用 ngOnInit 钩子创建组件时，你能不做检查吗？您是否需要定期检查或对某些焦点事件做出反应？

这是登录页面，当登录页面可见时，我想检查我是否已经有登录令牌，如果有，我将导航到主页，否则用户必须登录。这就是为什么我需要一些这样的钩子。

ngOnInit 不是解决方案。还是有其他方法可以做到这一点

【参考方案1】：

您可以使用一个技巧来做到这一点，那就是检测路线变化。

    import  ActivatedRoute  from '@angular/router';
    
    constructor(
        private routerActive:ActivatedRoute
      ) 
    
    ngOnInit() 
        this.routerActive.paramMap.subscribe(paramMap => 
            if (this.router.url === "/yourURL") 

              // ***** This runs whenever your page is displayed ******

            
        )

【参考方案2】：

下面是一段代码作为示例：

(function () 
  angular.module('app', [])
    .controller('MainController', function() 
      activate();
      function activate() 
        console.log('Success'); // this log will appear when ever your controller loads
      
    );
)();

【讨论】：

这个函数放在哪里？

能否请您发布一些代码，我可以将我的示例集成到其中！

是的，我已经放了代码，我正在尝试用ngOnInit钩子检查，但它只运行一次

当然它只运行一次，如我所说，它会在控制器加载时运行。

这是 AngularJS 代码。问题是关于 Angular 2+ 生命周期钩子。