Question

我正在像下面的i一样使用orderscomponent.ts检查用户是否在jwt token中登录

let userkey = this.storage.get("token");
if (!userkey) {
    this.router.navigate(['signup']);
}

然后基于signup导航到if-condition页面。重定向sign up页面后，我要填写表格。点击sign up

中的signupcomponent.ts按钮代码后，

<button type="submit" (click)="onSignUp()" class="btn btn-info btn-lg btn-block btn-rounded text-uppercase waves-effect waves-light"></button>

在 componet.ts 中，我有以下代码

onSignUp(){
    this.router.navigate([`orderpage`])
}

登录用户后，它将重定向到orderpage的同一页面。到目前为止，它工作正常。

现在我的问题是我使用的是相同的signupcomponent.ts 在主页中。当我单击“注册”时，它将带我进入注册页面，而当我单击“注册”按钮时，它应重定向到同一主页或个人资料页面。这是我想更改this.router.navigate([]) params once already defined url to another new url`

Answer 1

正如@James Glasgow所述，您可以使用服务来实现自己的目标。

它看起来像以下示例：

Service

@Injectable()
export class RouterHelper {
    redirectUrl: string = 'orderpage'; // Defined orderpage as default
}

orderscomponent.ts

this.router.navigate(['signup']).then((successful: boolean) => {
    // Only set the redirectUrl, if the routing is successful
    if (successful) {
        this.routerHelper.redirectUrl = 'orderspage';
    }
});

homepage.component.ts

this.router.navigate(['signup']).then((successful: boolean) => {
    // Only set the redirectUrl, if the routing is successful
    if (successful) { 
        this.routerHelper.redirectUrl = 'homepage'; 
    }
});

另一种方法可能是使用网址参数：

为此，您可以在两个组件的导航功能中添加参数，如下所示：

this.router.navigate(['signup', { parentUrl: 'orderpage'}]);

在您的signupcomponent.ts中：

onSignUp() {
    const parentUrl = this.route.snapshot.paramMap.get('parentUrl');
    this.router.navigate([parentUrl]);
}

如果要重用signupcomponent.ts，则应使用对路由器参数的订阅（请参阅here）。

Answer 2

有两种主要的使用方式

通过它将返回网址传递到服务中并由

使用

this.router.navigate([[this.urlService.redirectUrl]]);

您只需将网址存储在服务中

另一种使用方式

this.location.back();

哪个弹出堆栈并返回上一页Location Docs

动态路由更改

2 个答案: