在 Angular 中实施条件路由

Implement conditional Routing in Angular

我正在尝试实现以下功能。单击按钮以检查条件时,条件应该是不同于未定义的变量(或在我的情况下为总和)(如果不同则成功)。如果满足条件则转到成功页面,或者如果不满足条件则显示失败页面(+如果页面中没有任何更改则转到成功页面)。

.html

<div class="d-flex justify-content-center">

<button type="button" (click)="updatePost()" routerLink="/success-page">Save</button>

.ts 文件中的 updatePost() 方法只是从服务调用函数并在某些属性更改时更新用户(我在 .html 文件中有一些输入文本框).

updatePost() {
    this.sharedservice.updateUser(this.user).subscribe(response => {
}, error => {
    console.log(error);
    })
}

我尝试了很多方法,但功能不正确。问题可能是我尝试调用函数和实现逻辑的顺序。

两个页面都注册为routes

const routes: Routes = [
    {path: 'success-page', component: DisplaySuccessComponent},
    {path: 'fail-page', component: DisplayFailPageComponent},
];

在这种情况下,您不应使用 routerLink,而应在 upadtePost() 函数内导航,即:

updatePost() {
    this.sharedservice.updateUser(this.user).subscribe(
    response => {
        this.router.navigate('/success-page');
    }, 
    error => {
        console.log(error);
        this.router.navigate('/fail-page');
    });
}

为此,您应该从构造函数中使用 Router。为此你需要提供 constructor(private router: Router) {} 然后你需要检查变量不应该是未定义的,null 或不是预期的条件,然后你需要像 this.router.navigate(['fail-page']);如果不是未定义、不是 null 并且符合预期条件,那么您可以使用 this.router.navigate(['success-page']); 进行导航。所以,你的最终代码如下:-

// 在HTML中:-

<button type="button" (click)="updatePost()">Save</button>

// 在 ts:-

updatePost() { 
    this.sharedservice.updateUser(this.user).subscribe(response => {
       this.router.navigate(['success-page']);
}, error => {
       this.router.navigate(['fail-page']);
    console.log(error);
    })
}