Angular 相对路径

前言

在上周恰好看到《相对与绝对路径》这一节，刚开始看也没细细研究，就按着教程走一遍，直到后来看到了本节小测：

原本心想，TeacherAddComponent模块的跳转都摆在这了，这不就是照着写的事吗。

错误

先来看一下add(增长)按钮的跳转吧：

注意观察URL的变化，先是由 Teacher 跳转到 Teacher/add ，在点击“提交”后，又由 Teacher/add 跳转到 Teacher ，看一下具体的代码：

public onSubmit(): void {
    const url = 'http://localhost:8080/Teacher';
    const teacher = {
      name: this.name,
      username: this.username,
      email: this.email,
      sex: this.sex
    };
console.log(teacher);
this.httpClient.post(url,teacher)
  .subscribe(() =>{
    console.log('添加成功');
    this.appComponent.ngOnInit();
    this.router.navigate(['./../'],{relativeTo:this.route});

  },(response)=>{
    this.showMessage('请求发生错误');
    console.log('请求发生错误',response);
    });
  }

navigate(array, {})，接收的第二个参数为对象，对象中的属性relativeTo规定了跳转的相对路由

对于上面的代码来讲，相对路由是本路由，也就是 Teacher/add

./当前路径 ../上级路径，./../当前路径的上级路径。

当前路径为teacher/add时，当前路径的上级路径为teacher
这就是啊addComponent跳转的机制，顺着这个思路，editComponent也就不难了，说干就干

onSubmit():void{
  this.httpClient.put(this.getUrl(),this.teacher)
    .subscribe(()=>{
      console.log('更新成功');
      this.appComponent.ngOnInit();
      this.router.navigate(['./../'],{relativeTo:this.route});
    },
      ()=>
      {
        console.error('更新数据时发生错误,url:${this.getUrl()}');
      });
  }

理解的是这样：Teacher/edit，当前路径的上一级路径就是Teacher，而后打开界面进行实践：

解决

果真仍是不能太过相信直觉，既然出错误了，那就打开后台瞅瞅：

因为在跳转以前的方法是没有错误的，所以数据成功更新，因此会出现“更新成功”的字样，之因此会报错，是由于路径 Teacher/edit 没有找到，这与个人设想差了好多，而后看了一下路径的变化：

---

---

如今路径多的除了 edit 还有一个数字，也就是id，那么当前路径就是Teacher/edit/id， 那么当前路径的上一级路径就是Teacher/edit，可是，在路由的设置文件中，是没有这个路径的，因此控制台会报错.

const routes: Routes = [
  {
    path: 'teacher',
    component:TeacherIndexComponent
  },
  {
    path:'teacher/add',
    component: TeacherAddComponent
  },
  {
    path:'teacher/edit/:id',
    component:TeacherEditComponent
  },
  {
    path:'klass',
    component:IndexComponent
  }
];

既然上一级是Teacher/edit，Teacher/edit 的上一级是Teacher，那就再加一个“../”

问题成功解决

总结

本觉得相对路径不把参数考虑在内，可是觉得就是觉得，不通过实践真的没法知道对错，正遇上最近马原考试，刷到不少有关于认识与实践的题，
这些题的大体意思就是说科学的认识是以实践为基础的，实践是检验认识正确性的惟一标准，因此说不能眼高手低，要多实践，多动手，尤为对于敲代码来讲，更是这样.