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