Angular 7 не загружает HTML-шаблон, но URL-адрес разрешается правильно - PullRequest
Новая
       12

Angular 7 не загружает HTML-шаблон, но URL-адрес разрешается правильно

0 голосов
/ 05 января 2019

Мой код: 

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },]},

    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },

  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
}, {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

Когда я получаю доступ к компоненту списка, URL-адрес разрешается правильно, но шаблон HTML не меняется.

Если я помещу маршруты ComponentOne и ListComponent в один и тот же дочерний массив, как показано ниже: 

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },]},

Я получаю ошибку

ошибка: невозможно сопоставить никакие маршруты.

Как мне решить эту проблему:

  1. Чтобы шаблон загружался с соответствующим URL-адресом?
  2. А как избежать ошибки (если возможно), когда я помещаю маршруты ComponentOne и ListComponent в один и тот же дочерний массив?

Я видел пару ответов, включая этот ответ , но они не решают мою проблему.

Обновление: Это мой код HomeComponent 

<div class="body">
  <div class="box">
    <div class="one"><home-left-content></home-left-content></div>
    <div class="two"><home-main-content></home-main-content></div>
    <div class="three"><home-right-content></home-right-content></div>
  </div>
</div>

и мой код компонента home-main-content выглядит так: 

<div>
    <router-outlet name="homeMainContent"></router-outlet>
</div>

Эта же настройка работает в моем файле конфигурации admin-routing. Вот почему я смущен, когда я получаю ошибки. Мне было интересно, может быть, это из-за того, что в качестве пути у меня указана пустая строка или потому, что код основного компонента существует в основном файле конфигурации маршрутизации?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Благодаря этому блогу Мне удалось решить мою проблему.

Я просто назвал родительский маршрут home и создал модуль home-routing Код для основного модуля маршрутизации: 

const routes: Routes = [{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full',
  },
  {
  path: 'home',
  loadChildren: 'app/home/home.module#HomeModule'
  },
  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
  }, 
  {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

Путь к модулю домашней маршрутизации: 

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne, // main home view
      outlet: 'homeMainContent',
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },
    ]},
  ]
0 голосов
/ 05 января 2019

приложение-routing.module.ts 

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PrimiryOneComponent} from './primiry-one/primiry-one.component';
import {PrimiryTwoComponent} from './primiry-two/primiry-two.component';
import {SecondaryOneComponent} from './secondary-one/secondary-one.component';
import {SecondaryTwoComponent} from './secondary-two/secondary-two.component';
import {PrimiryThreeComponent} from './primiry-three/primiry-three.component';
import {SecondaryThreeComponent} from './secondary-three/secondary-three.component';

const routes: Routes = [
  {
    path: '',
    component: PrimiryOneComponent,
  },
  {
    path: 'two',
    component: PrimiryTwoComponent,
  },
  {
    path: 'three',
    component: PrimiryThreeComponent,
  },
  {
    path: '',
    component: SecondaryOneComponent,
    outlet: 'secondary',
  },
  {
    path: 'two',
    component: SecondaryTwoComponent,
    outlet: 'secondary',
  },{
    path: 'three',
    component: SecondaryThreeComponent,
    outlet: 'secondary',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

app.component.html 

<ul>
  <li>
    <a [routerLink]="[{outlets: { primary: null } }]">go to primary-one</a>
  </li>

  <li>
    <a [routerLink]="['two']">go to primary-two</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'two' } }]">go to primary-two</a>-->
  </li>

  <li>
    <a [routerLink]="['three']">go to primary-three</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'three' } }]">go to primary-three</a>-->
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: null } }">go to secondary-one</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'two' } }">go to secondary-two</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'three' } }">go to secondary-three</a>
  </li>

  <li>
    <a [routerLink]="[{outlets: { primary: 'two', secondary: 'three' } }]">go to primary-two and secondary-three</a>
  </li>

  <li>
    <a [routerLink]="['']">go to primary-one and secondary-one</a>
     <!--equal to <a [routerLink]="[{outlets: { primary: null, secondary: null } }]">go to primary-one and secondary-one</a>-->
  </li>
</ul>
<router-outlet></router-outlet>
<router-outlet name="secondary"></router-outlet>
...