Question

我有一个角度应用程序，在其中我使用相同的组件来创建和更新数据库对象。从寄存器列表（在String monthYear = month+"/"+ monthYear[1];下），我可以导航到现有记录（在complaints下）或创建一个新记录（在complaints/detail/id下）。创建新寄存器时，我希望保留在同一组件中（因此不会被破坏并重新创建，并且用户看不到任何闪烁），但应该更新URL以反映新创建项目的ID （从complaints/detail到complaints/detail）。

我应该如何在模块中指定路由，以及如何从创建页面导航到编辑页面？

Answer 1

我的Example。

在路线中，只需指向组件一次，即可避免重新娱乐：

{
    path: 'data',
    redirectTo: 'data/'
},
{
    path: 'data/:id',
    component: CreateAndEditComponent
}

然后在组件中观察参数更改：

  ngOnInit() {
    console.log('init');
    const getParams = () => {
      const dataId = this.route.snapshot.paramMap.get('id');
      this.data = dataId.length > 0 ? this.getDataById(dataId) : new Data();
    };
    this.router.events.pipe(takeUntil(this._destroyed)).subscribe(event => {
      // only listen for NavigationEnd as that indicates navigation processing is complete
      if (event instanceof NavigationEnd) {
        // get params for each consecutive route
        getParams();
      }
    });
    // get params for initial route
    getParams();
  }

  save() {
    this.service.saveData(this.data);
    this.router.navigate(['/data', this.data.id]);
  }

如何使用相同的路径进行创建和编辑，以及从一个导航到另一个，而又不破坏并再次创建组件？

1 个答案: