Маршруты Angular 2 не работают при навигации по URL-адресу браузера

У меня есть некоторые проблемы с маршрутами для проекта Angular, в основном с третьим уровнем дочерних маршрутов. Маршруты работают идеально во время навигации в приложении. (routerLink) и проблема возникает при доступе к URL-адресу через URL-адрес браузера.

Моя версия Angular — 2.4.0
Я тестирую сервер разработки с ng serve.

Для проекта с заданной структурой

.
├── photos
├── posts
├── users
│   ├── detail
│   │   ├── address
│   │   ├── family
│   │   ├── information
│   │   └── phones
│   ├── friends
│   └── profile
└── videos

Ниже приведен код,

// user routes
export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: UserComponent,
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

и зарегистрирован как,

@NgModule({
  declarations: [
    // declarations
  ],
  imports: [
    AppRoutes
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Таким образом, приложение хорошо работает с RouterLink.

[routerLink]="['/user', username, 'detail']

но когда я перемещаюсь по браузеру <host>/user/myuser/detail, возникает исключение

Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'

Что случилось? Спасибо.

NB: я установил <router-outlet> и отлично работает на routerLink, и проблема возникает при переходе по полному URL-адресу в браузере.


typescript angular angular2-routing angular2-router3
person All Іѕ Vаиітy    schedule 15.03.2017    source источник
comment
Вы добавили <router-outlet></router-outlet> в шаблон корневого компонента? если нет, поместите его в свой шаблон AppComponent, где будет загружаться html   -  person Umar Younis    schedule 15.03.2017
comment
У меня есть несколько router-outlet, один в компоненте приложения, один в пользовательском компоненте и один в подробном компоненте.   -  person All Іѕ Vаиітy    schedule 15.03.2017

Ответы (4)


arrow_upward
7
arrow_downward

Я предполагаю, что когда вы переходите от user/:username/ к /user/:username/detail, вам нужно, чтобы ваш UserComponent скрыл все, что находится в его шаблоне, и показал DetailComponent

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

parent.component.html

<router-outlet></router-outlet>

routes.ts

Теперь настроим маршруты так, чтобы user/:username/ загружался в родительский компонент

// user routes
export const userRoutes : Routes = [
 {
    path: '',
    component: UserComponent // the '' path will load UserComponent
  },
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: ParentComponent, //This component will load its children
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

Итак, здесь происходит то, что когда вы переходите к user/:username, загружается ParentComponent, а затем загружается UserComponentloaded в выходе родительского компонента (поскольку путь '' соответствует user/:username)

Вот рабочий пример: Github

При доступе к user/myuser будет отображаться: пользователь работает! user/myuser/details отобразит: детали работают! как вы можете видеть ниже (без использования маршрутизатора)

введите описание изображения здесь

person YounesM    schedule 17.03.2017

arrow_upward
0
arrow_downward

Вы установили <base href="/">?

Какой у вас бэкенд? Если пользователь сначала переходит на полный URL-адрес подстраницы вашего приложения (например, www.mysite.com/users/john-doe), а ваш бэкэнд не возвращает загрузочную страницу angular 2 (index.html с загрузочными скриптами) , то угловой маршрутизатор никогда не сработает, хотя я думаю, что в вашем случае это не проблема, поскольку вы получаете сообщение об ошибке от углового.

У меня есть базовая часть .net, которая всегда возвращает index.html для запросов, которые не являются статическими файлами, поэтому он всегда правильно загружает приложение и использует угловую маршрутизацию.

person Andrej Kikelj    schedule 15.03.2017
comment
Я установил base href (это угловой проект cli). сервер является локальным сервером разработки с ng serve. - person All Іѕ Vаиітy; 15.03.2017

arrow_upward
0
arrow_downward

используйте <base href="/"> внутри тега. Примечание <base href="/"> он должен быть сверху внутри тега заголовка.

<head>
  <base href="/">
 other css and jquery ...
</head>

Маршрутизация как

const appRoutes: Routes = [
    {
        path: 'Admin',
        component: AdminComponent,
        children: [

            {
                path: 'CandidateInfo',
                component: CandidateInfoComponent
            },
            {
                path: 'RptCandidateInfo',
                component: RptCandidateInfoComponent
            },
            {
                path: 'RptCandidateInfoDT',
                component: RptCandidateDTInfoComponent
            }
        ]
    },
];

Все работает нормально.

person user3522814    schedule 23.08.2018

arrow_upward
-3
arrow_downward

Используйте этот код в html routerLink="/user" и укажите свой путь в routing.ts, и когда вы нажмете эту ссылку на маршрутизатор, она перейдет к соответствующей ссылке.

person Lalit Dogra    schedule 15.03.2017
comment
и основной файл также используйте следующий код ‹router-outlet›‹/router-outlet› - person Lalit Dogra; 15.03.2017
comment
Он хорошо работает с routerLink, и проблема заключается в навигации по URL-адресу браузера. Который не имеет ничего общего с routerLink - person All Іѕ Vаиітy; 15.03.2017