在 Angular 中实施条件路由

Question

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

.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},
];

Answer 1

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

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

Answer 2

为此，您应该从构造函数中使用 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);
    })
}

在 Angular 中实施条件路由

Implement conditional Routing in Angular

html

angular

typescript

routes

routerlink