вручную изменять параметры маршрута приводит к несовместимым пользовательского интерфейса

Question

Вот plunker играть:

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

Все работает хорошо, за исключением того, когда вы вручную изменение параметра идентификатор в строке URL-адрес , потому что тогда выпадающий проект не показывает новый projectId как текущий проект. Это происходит, когда пользователь сохраняет URL-адрес в качестве любимой ссылки и копирует/вставляет его в строку url! Обычный случай, который я бы сказал!

Чтобы исправить это, я могу прослушивать изменения route.params в TestsListComponent и добавить чек с помощью sharedService/EventEmitter, чтобы измененный идентификатор существовал в этом выпадающем списке. Возвращаемое значение bool существуетProjectId внутри TestsListComponent решает, что я должен перенаправить на страницу /projects, потому что идентификатор не существует.

Но, честно говоря, перенаправление с TestsListComponent слишком поздно, по крайней мере, с точки зрения пользователя, потому что route projects/:id/tests уже активирован.

Как вы исправите это неправильное поведение?

P.S.

• Может быть, это своего рода глобальное изменение Params я могу слушать и проверять путь и его идентификатор внутри ProjectsListComponent, что помогло бы!

• Если кто-то знает, как отредактировать строку url plunkr в режиме окна, чтобы проверить эту несогласованность, пожалуйста, дайте мне знать, как вы сделали этот readlly url bar редактируемым ... даже копирование URL-адреса в новую вкладку не работает , так как я получаю plunkr не нашли ошибку ... => ОТВЕТ

  1. нагрузки на plunkr и активировать режим окна
  2. В режиме окна копирования/вставки URL в новую вкладку
  3. Когда то есть вставленный URL: https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
  4. Сделать это, что URL: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
  5. и изменение пары: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
  6. Если вы не добавить хэш, то вы получите не найден 404.

Answer 1

Я не уверен, если я правильно понимаю ваш вопрос, во всяком случае вот мой plunkr.

this.router.events.subscribe(event => { 

     if (event instanceof RoutesRecognized) 
     { 
      var first=event.state.root.firstChild.firstChild; 
      var id = first && event.state.root.firstChild.firstChild.params['id']; 
      console.debug('recognized', id); 
      this.currentProject = this.projects[+id-1]; 

      console.log(this.currentProject); 
     } 
    }); 

Просто перейдите к #/projects/1/tests.

Answer 2

Там нет глобального PARAMS изменить можно подписаться.

Один подход заключается, чтобы найти маршрут и его Params, начиная с корневого маршрутизатора:

console.log('router', this.router.routerState.root.firstChild.firstChild && this.router.routerState.root.firstChild.firstChild.snapshot.params); 

Это может быть сделано в течение this.router.events.subscribe((val) => { или в пределах маршрутизатора охранником как canActivate или resolvehttps://angular.io/docs/ts/latest/guide/router.html#!#guards

Answer 3

обновить приложение .routes.TS файл, как показано ниже, и использовать HashLocationStrategy, для справки: HashLocationStrategy

import {Routes, RouterModule} from '@angular/router'; 
import ProjectListComponent from './projects-list.component'; 
import TestsListComponent from './tests-list.component'; 
import OverviewComponent from './overview.component'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 


export const routes: Routes = [ 
    { path: '', redirectTo: 'projects', pathMatch: 'full' }, 
    { 
     path: 'projects', component: ProjectListComponent, 
     children: [ 
      { path: ':id', redirectTo: ':id', pathMatch: 'full' }, 
      { 
       path: ':id', component: OverviewComponent, 
       children: [ 
        { path: '', redirectTo: 'tests', pathMatch: 'full' }, 
        { path: 'tests', component: TestsListComponent }, 

       ] 
     ] 
    } 
]; 

export const appRoutingProviders: any[] = [ 
    { 
     provide: LocationStrategy, 
     useClass: HashLocationStrategy 
    } 
]; 

export const routing = RouterModule.forRoot(routes);