Question

我是Angular的新手（今天9月 - 3月 - 18日，第8天）。

我有一个需要在窗口加载事件上执行的jquery方法。从我的角度组件中，当我执行this.router.navigate(['/student-consent'])或单击浏览器上的导航按钮访问URL /student-consent窗口时，加载事件未触发，因此我的方法未运行。

但是，当我正在执行window.location.href = '/student-consent'时，我的方法正在运行。

我已经对此做了一些研究，我发现在Angular路线导航或浏览器导航（在带路由的Angular应用程序中）没有加载窗口，而是在路由器插座中加载有关的html（组件）。 / p>

相反，刷新页面或直接在浏览器中点击URL会执行这些方法窗口加载事件确实发生的方法。

我的问题：有没有办法在路线改变时执行我的方法或在路线改变时触发窗口加载事件？

更新：根据设计约束，在onAfterViewInit中执行jquery方法或不允许任何组件生命周期钩子~~在我的组织~~中。

js中的窗口加载事件处理程序 -

$(window).on("load", function () {
    $(".preloader").fadeOut(1000);
});

我的组件中的相关Html代码 -

<div class="preloader"></div>

组件 -

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';

@Component({
  selector: 'app-student-login-creation',
  templateUrl: './student-login-creation.component.html',
  styleUrls: ['./student-login-creation.component.css']
})
export class StudentLoginCreationComponent implements  OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    //$(window).trigger('routeChange');
  }

  createId() {
    console.log('student login');
    // window.location.href = '/student-consent';
    this.router.navigate(['/student-consent']);
  }

}

Answer 1

你是对的，Angular不会在路线更改时触发窗口加载。这是两件不同的事情。

说到不同的东西，JQuery和Angular也是如此。你应该不使用Angular的JQuery：当使用Angular时，你不应该直接操作DOM，你应该使用框架来做到这一点。而JQuery不是这个框架的一部分......

但是如果你想继续这样做，那么你需要更新你的触发功能。我想现在你有类似

的东西

window.onload = () => {...}

对吗？好吧，如果你想在Angular中收听路由更改，那么你需要订阅路由器事件。

首先将路由器注入组件，然后收听路由更改事件：

constructor(private router:Router) {
  router.events.subscribe(events => {
    console.log('Angular has changed route');
  });
}

请记住，如果将其放在路由组件中，那么只要您更改路径，它就会被销毁。

window.location.href vs angular2 router.navigate

1 个答案: