Использование angular-router для навигации по представлениям на странице - PullRequest
Новая
       18

Использование angular-router для навигации по представлениям на странице

2 голосов
/ 30 июня 2019

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

Я пытался просто поместить именованный маршрутизатор-розетку внутри компонентов, но, похоже, он не работает ... Есть мысли?

Вот мои общие настройки.

Шаблон приложения 

<main>
  <router-outlet></router-outlet>
</main>

Модуль приложения 

const routes: Routes = [
 { 
  path: 'page', 
  component: PageModule
 }
];

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

Шаблон страницы: 

<tabset>
  <tab>
    <router-outlet name="section1"></router-outlet>
  </tab>
  <tab>
    <router-outlet name="section2"></router-outlet>
  </tab>
</tabset>

Страница модуля 

const routes: Routes = [
  {
    path: '',
    component: PageComponent,
  },
  {
    path: 'section1-view1',
    component: View1Component,
    outlet: 'section1',
  },
  {
    path: 'section1-view2',
    component: View2Component,
    outlet: 'section1',
  }
  // More routes ...
];

@NgModule({
  declarations: [
    PageComponent,
    View1Component,
    View2Component
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    TabsetModule
  ]
})
export class PageModule { constructor(){} }

Ответы [ 2 ]

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

Создайте каждый компонент в новом модуле, затем определите внутренние маршруты в этом модуле, поэтому при каждом маршруте к модулю вы можете выполнять маршрутизацию по внутренним маршрутам.

сохранить свои текущие маршруты такими, какие они есть, иобъявите новый модуль (импортируйте эти модули в app.module), и в этом модуле создайте новые компоненты, куда вы хотите направить этот модуль.

проверьте это: Stackblitz Просто пример для вашего использования.

Здесь есть один компонент в app.module и модуль с именем intmodule, а в intmodule есть два компонента.Начиная с app.module мы можем прокладывать маршрут между hello.component и intmodule, а в intmodule мы можем прокладывать маршрут между comp1 и comp2.

комментарий для получения дополнительной помощи :)

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

Обновлено

Попробуйте это

создать два отдельных компонента для отображения на главной странице 

ng g c section1
ng g c section2

section1 .ts file 

@Component({
  selector: 'section1',
  templateUrl: './section1.component.html',
  styleUrls: ['./section1.component.css'],
})

аналогично section2 .ts file 

@Component({
      selector: 'section2',
      templateUrl: './section2.component.html',
      styleUrls: ['./section2.component.css'],
    })

, тогда на главной странице вы можете использовать несколько таких разделов / компонентов, как этот

шаблон страницы 

<div class="row">
  <div class="col-sm-5">
    <section1></section1> <!-- component selector -->
  </div>
  <div class="col-sm-5">
    <section2></section2>
  </div>
</div>
...