Angular 2 路由和链接行为答案

【问题标题】：Angular 2 Routing and links behaviorAngular 2 路由和链接行为
【发布时间】：2018-01-29 07:55:22
【问题描述】：

我想问一下关于 Angular 2 - 5 路由的问题。

我认为作为它的单页应用程序，当我使用路由时，我发现链接的行为与正常应用程序不同，导致页面无法重新加载。

当您单击页面中间的链接时，路线会更改 DOM，但您会停留在页面的同一点。（不是像正常申请一样去顶部）

那是正常的吗？或者有什么我想念的吗？

【问题讨论】：

标签： angular routes angular-ui-router router

【解决方案1】：

这在 Angular 5 中是正常的。但是，如果您想更改此行为，您可以收听路由更改并滚动到顶部。

Guilherme Meireles provides code for doing this:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((e) => {
            if (!(e instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

【讨论】：

【解决方案2】：

这是“正常的”，因为正如您所说，Angular 是一个单页应用程序。

变得简单，Angular 路由允许您停留在同一页面上，并更改浏览器的行为（document、window 对象）以适应其行为。

这种行为改变了查看网页的“通常”方式，即 1 个 URL = 1 个服务器生成的页面。

在 Angular 的例子中，它不是在每次 URL 更改时从服务器请求一个页面，而是在启动时请求一个页面（index.html），并通过使用 URL 来更改它的内容。

【讨论】：