Как использовать один и тот же маршрут для создания и редактирования и переходить от одного к другому, не разрушая и не создавая компонент снова? - PullRequest
Новая
       20

Как использовать один и тот же маршрут для создания и редактирования и переходить от одного к другому, не разрушая и не создавая компонент снова?

1 голос
/ 19 июня 2019

У меня есть угловое приложение, в котором я использую один и тот же компонент для создания и обновления объектов моей базы данных. Из списка регистров (под complaints) я могу перейти к существующей записи (под complaints/detail/id) или создать новую (под complaints/detail). Когда я создаю новый регистр, я хотел бы остаться в том же компоненте (чтобы он не разрушался и не создавался заново, а пользователь не видел флэш), но URL-адрес должен быть обновлен, чтобы отражать идентификатор нового созданного элемента. (от complaints/detail до complaints/detail/id).

Как мне указать маршруты в моем модуле и как мне перейти от страницы создания к странице издания?

1 Ответ

0 голосов
/ 19 июня 2019

My Пример .

На маршруте только один раз укажите компонент, чтобы избежать воссоздания: 

{
    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]);
  }
...