首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用相同的路径进行创建和编辑,并在不破坏和再次创建组件的情况下从一个导航到另一个?

如何使用相同的路径进行创建和编辑,并在不破坏和再次创建组件的情况下从一个导航到另一个?
EN

Stack Overflow用户
提问于 2019-06-20 01:13:38
回答 1查看 98关注 0票数 1

我有一个angular应用程序,其中我使用相同的组件来创建和更新我的数据库的对象。从寄存器列表(在complaints下),我可以导航到现有的记录(在complaints/detail/id下)或创建一个新的记录(在complaints/detail下)。当我创建一个新的注册表时,我希望保留在相同的组件中(这样它就不会被销毁并重新创建,并且用户看不到任何闪存),但是URL应该更新以反映新创建的项的Id (从complaints/detailcomplaints/detail/id)。

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

EN

回答 1

Stack Overflow用户

发布于 2019-06-20 04:51:36

我的Example

在路由中,只指向组件一次,以避免重新创建:

代码语言:javascript
复制
{
    path: 'data',
    redirectTo: 'data/'
},
{
    path: 'data/:id',
    component: CreateAndEditComponent
}

在组件中观察参数的变化:

代码语言:javascript
复制
  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]);
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56672858

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档