Внутренняя навигация по страницам с использованием Angular 7 - PullRequest
Новая
       56

Внутренняя навигация по страницам с использованием Angular 7

1 голос
/ 13 мая 2019

У меня полно работающее приложение ASP.Net Zero для навигации. Теперь я создал внутреннюю страницу, по которой я хочу перемещаться, что-то вроде этого:

enter image description here

Со следующей структурой:

enter image description here

Содержимое test.component.html: 

<div [@routerTransition]>
<div class="m-content">
    <div class="m-portlet m-portlet--mobile tests">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">Spellings</h3>
                        </div>
                    </div>
                </div>
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>

Там я определил <router-outlet> для навигации, используя «область навигации» на рисунке.

Я создал пользовательскую навигацию, определенную в spelling-routing.module.ts: 

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TestComponent } from './test-list/test.component';
import { QuestionComponent } from './questions/questions.component';
import { TestContainerComponent } from './test-list/test-container/test-container.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: TestComponent,
                children: [
                    { path: 'test-container', component: TestContainerComponent, data: { permission: 'Pages.Tenant.Tests' } },
                    { path: 'questions/:testId', component: QuestionComponent, data: { permission: 'Pages.Tenant.Tests' } }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class SpellingRoutingModule { }

Это работает для загрузки основного test.component.html, но не может заполнить <router-outlet> внутри него, чтобы перейти к некоторым внутренним компонентам.

Пожалуйста, как заполнить <router-outlet> объект test.component.html объектом по умолчанию?

См. Содержимое папки src здесь:

Dropbox ссылка на папку src

1 Ответ

0 голосов
/ 13 мая 2019

Я не уверен, как вы проектируете основную маршрутизацию, но ниже моя конфигурация

Моя основная маршрутизация и я буду лениво загружать AccountModule 

export const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: HomeComponent },
  //lazy load feature module
  { path: "account", loadChildren: "./account/account.module#AccountModule" },
  { path: "**", redirectTo: "account", pathMatch: "full" }
];

Тогда в моем дочернем маршруте я определю вот так 

export const accountRoutes: Routes = [
  {
    path: "",
    component: AccountComponent,
    children: [
      { path: "login", component: LoginComponent },
      { path: "register-account", component: RegisterComponent }
    ]
  }
];

поэтому роутер-розетка будет работать в шаблоне учетной записи, как этот 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a [routerLink]="['login']" [routerLinkActive]="['active']">Login</a>
    </li>
    <li class="breadcrumb-item">
      <a [routerLink]="['register-account']" [routerLinkActive]="['active']">Register</a>
    </li>
  </ol>
</nav>

<router-outlet></router-outlet>
...