javascript - 使用 Angular 7 的内部页面导航

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 { }

这可以加载 main test.component.html，但不能填充<router-outlet>它的内部以导航到一些内部组件。

请问，如何用默认对象填充<router-outlet>对象？test.component.html

在此处查看src文件夹内容：

Dropbox 链接到 src 文件夹

标签： javascriptnode.jsangulartypescriptangular7