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，那就再加一个“../”

问题成功解决

总结

本以为相对路径不把参数考虑在内，但是以为就是以为，不经过实践真的无法知道对错，正赶上最近马原考试，刷到很多有关于认识与实践的题，
这些题的大致意思就是说科学的认识是以实践为基础的，实践是检验认识正确性的唯一标准，所以说不能眼高手低，要多实践，多动手，尤其对于敲代码来说，更是这样.