Изменить объект данных в ActivatedRoute - PullRequest
Новая
       27

Изменить объект данных в ActivatedRoute

0 голосов
/ 11 мая 2018

Мне нужно изменить значение крошки в объекте данных моего текущего маршрута.Вот моя конфигурация маршрута.

      {
    path: "users",
    component: UserListComponent,
    children: [
      {
        path: ":id",
        component: UserComponent,
        data: {
          breadcrumb: '<User name here>'
        },
       }
    ],
    data: {
      breadcrumb: 'Users'
    }
  },

Я пытаюсь сделать это: 

        this._route.data = { breadcrumb: this.user.displayName }; //_route is ActivatedRoute

, но это не работает.Любая помощь будет оценена.Благодарю.

Ответы [ 3 ]

0 голосов
/ 11 мая 2018

Я предполагаю, что вы хотите изменить данные до начала навигации.Потому что это не ясно из вопроса.

Найдите событие NavigationStart и установите this._route.snapshot.data вместо this._route.data. 

this.router.events
.filter(event => event instanceof NavigationStart)
.subscribe(() => {
     this._route.snapshot.data = { breadcrumb: this.user.displayName };
});
0 голосов
/ 02 декабря 2018

У меня была похожая проблема, и я последовал совету: https://github.com/angular/angular/issues/13860#issuecomment-271884682

По сути, идея в том, что вы не сразу определяете дочерние элементы маршрутизатора, а задерживаете это. Итак, в вашем Routes выше просто установите children: [], возьмите эти данные и поместите их в другой объект Routes в UserListComponent. Затем в этом компоненте у вас есть что-то вроде следующего для вашего конструктора: 

constructor(activatedRoute: ActivatedRoute) {
    activatedRoute.routeConfig.children = routes;
}

Итак, все это объединяет два файла, и мы получаем: 

// user-routing.module.ts
const routes = [
  {
    path: "users",
    component: UserListComponent,
    children: [],
    data: {
      breadcrumb: 'Users'
    }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule {
  constructor() { }
}

и 

// user.component.ts
const routes = [
  {
    path: ":id",
    component: UserComponent,
    data: {
      breadcrumb: '<User name here>'
    },
  }
];
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  constructor(activatedRoute: ActivatedRoute) {
    routes[0].data.breadcrumb = 'Bob Johnson';
    activatedRoute.routeConfig.children = routes;
  }
}

Это позволяет вам передавать то, что выглядит как динамические данные или данные с поздним связыванием, в маршрутизатор, поскольку у вас есть экземпляр класса с внедренными зависимостями, с помощью которого вы можете выполнять любые необходимые манипуляции с данными перед их подключением к маршрутизатору. .

0 голосов
/ 11 мая 2018

Свойство данных маршрута является статическим и не может быть изменено после создания (источник: https://angular.io/api/router/Data).

. Вероятно, существует множество других способов достижения вашей цели. Наиболее распространенным методом будет захват :id параметр из маршрута (я предполагаю, что это идентификатор пользователя) и введите его в UserService (который вы создаете), который затем возвращает displayName.

пользователя. Более продвинутая опция:

Хотя это может быть излишним для вашего конкретного случая использования, в моем приложении я создал компонент построения хлебных крошек, который извлекает статические компоненты хлебных крошек из свойств данных маршрута и отображает их. Например, одна из моих конфигураций маршрута выглядит так:: 

...
import { OrganizationBreadcrumbComponent } from './organization-breadcrumb.component'
import { OrganizationMenuComponent } from './organization-menu.component'
import { ProfileBreadcrumbComponent } from './profile/profile-breadcrumb.component'
import { PeopleBreadcrumbComponent } from './people/people-breadcrumb.component'

const routes: Routes = [
  {
    path: 'organization/:organizationId',
    data: {
      breadcrumb: OrganizationBreadcrumbComponent,
      menu: OrganizationMenuComponent,
    },
    canActivate: [OrganizationGuard],
    children: [
      {
        path: 'profile',
        data: {
          breadcrumb: ProfileBreadcrumbComponent,
        },
        component: ProfileComponent,
      },
      {
        path: 'people',
        data: {
          breadcrumb: PeopleBreadcrumbComponent,
        },
        component: PeopleComponent,
      }
    ],
  },
];
...

В моем приложении я добавляю классы компонентов (т.е. ProfileBreadcrumbComponent) к объектам данных в моей конфигурации маршрута. Затем у меня есть компонент рендеринга крошки, который подписывается наПараметр данных маршрутизатора извлекает эти классы компонентов «хлебная крошка» и динамически создает их, используя каждый из них.ponent может делать все, что ему нужно для создания собственного представления.

Например, вы можете создать UserDisplayNameBreadcrumbComponent, который в ngOnInit() извлекает текущий идентификатор пользователя из параметров маршрута и ищет, чтоПользователь находит свое отображаемое имя и отображает его.

Я недавно опубликовал вопрос об этом (до того, как все заработало), который объясняет больше, если вам интересно: https://stackoverflow.com/a/43715200/5490505

Я использую ngrx / router-store в своем приложении, что делает подписку на все хлебные крошки для данного маршрута довольно простой.

...