2

在带有 UI-Router 的 AngularJs 中，我可以执行以下操作以使任何未经授权或不存在的状态显示在特定视图中，而无需重定向，因此用户可以知道哪个路由/url 是不成功的：

.state('notauthorized', {
    templateUrl: 'notauthorized.html'
})
.state('notfound', {
    templateUrl: 'notfound.html'
});

现在我正在使用内置的 RouteModule 开发 Angular 4。有没有办法在不将用户重定向到完全不同的路线的情况下完成同样的事情？

4

2 回答 2

3

我不知道这是否可能，但您始终可以重定向到“未找到”视图，但告诉路由器不要更改 URL，以便用户看起来他们仍在同一页面/URL 上。

从这里使用 skipLocationChange 选项https://angular.io/api/router/NavigationExtras

在组件中：

 router.navigateByUrl("/pathToYourNotFoundView", { skipLocationChange: true });

或者如果它是模板中的链接 -

<a [routerLink]="..." skipLocationChange>click me</a>
于 2017-08-24T23:34:34.157 回答
0

使用 UI-Router 已经太久了，我不记得它是如何工作的，所以这可能不是你所描述的。

但是对于 Angular，每个模板都有一个组件。因此，您需要一个用于“未授权”和“未找到”模板的组件。或者，您可以使用一个模板制作一个组件，该模板显示定义“未授权”或“未找到”的文本。

例如，我的页面未找到组件如下所示：

import { Component } from '@angular/core';

@Component({
    template: `
    <h1>This is not the page you were looking for!</h1>
    `
})
export class PageNotFoundComponent { }

相反，您可以像这样使其更概括：

import { Component } from '@angular/core';

@Component({
    template: `
    <h1>{{message}}</h1>
    `
})
export class MessageComponent {
    message: string;

}

这会支持你的场景吗？

要在重新路由之前保留用户的“当前”路由，您可以构建如下服务：

import { Injectable } from '@angular/core';

@Injectable()
export class MessageService {
    currentUrl: string;

}

然后，当某处出现问题时，您将拥有如下代码：

    this.messageService.currentUrl = url;
    this.router.navigate(['/pageNotFound']);

然后，您可以检索 currentUrl 以显示它或其他任何内容。

于 2017-08-24T23:28:31.477 回答