在Angular 10中,当您尝试切换到编辑页面时,您可能会遇到一些路由问题。 即使在路由中设置Edit Segment(例如'edit/:id”),也不起作用。
解决此问题的一种方法是在路由器模块中添加一个额外的路由,以便在URL中设置正确的路径。 这里是一个示例:
app-routing.module.ts:
...
import { EditComponent } from './edit/edit.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'edit/:id', component: EditComponent },
{ path: 'not-found', component: NotFoundComponent },
{ path: '**', redirectTo: '/not-found' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
edit.component.ts:
import { ActivatedRoute, Router } from '@angular/router';
@Component({
...
})
export class EditComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
onSave() {
// Do something here to save changes
this.router.navigate(['/']);
}
}
注意,在上面的示例中,我们使用ActivatedRoute来提取目标ID( / edit /:id)。然后,我们使用Router导航回主页。
希望这个示例可以帮助您解决Angular 10中的路由问题!