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

【问题标题】：how to create "ngOnActive" life cycle hook in angular?如何以角度创建“ngOnActive”生命周期挂钩？
【发布时间】：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 不是解决方案。还是有其他方法可以做到这一点

标签： angular typescript hook angular-lifecycle-hooks

【解决方案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+ 生命周期钩子。