Question

我有一个运行正常的ASP.Net零应用程序导航。现在，我创建了一个要导航的内部页面，如下所示：

具有以下结构：

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>的{{1}}对象？

在此处查看test.component.html文件夹的内容：

Dropbox link to src folder

Answer 1

我不确定您如何设计主路由，但下面是我的配置

我的主要路由，并且我会延迟加载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>

使用Angular 7进行内部页面导航

1 个答案: