Angular 2 路由和链接行为

Question

想问一下angular2-5路由

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

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

这正常吗？或者我对此有什么想念的？

Answer 1

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

吉列尔梅·梅雷莱斯 :

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)
        });
    }
}

Answer 2

它是 "normal"，因为正如您所说，Angular 是一个 单页应用程序。

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

此行为不同于 "usual" 查看网页的方式，即 1 URL = 1 个服务器生成的页面。

在 Angular 的情况下，它不是在每次 URL 更改时从服务器请求页面，而是在启动时请求单个页面 (index.html)，并且它使用 URL 更改它的内容。

Angular 2 路由和链接行为

Angular 2 Routing and links behavior

angular

routes

angular-ui-router

router