Angular 角度子模块父组件

这是一个我花了一些时间研究的问题，虽然我已经得到了部分答案，但我还没有找到一个可靠的结论性答案

我正在Angular 4.3中开发一个小应用程序。我目前的设计使用了一个基本的路由系统，其中主应用程序模块定义了到登录、注册和功能模块部分（其中声明了各种子组件）的路由

我的app.routing.ts文件：

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login';
import { RegisterComponent } from './auth/register';

const routes: Routes = [
    {
        path: 'register',
        component: RegisterComponent
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'logout',
        redirectTo: 'login'
    },
    {
        path: '',
        loadChildren: './features/features.module#FeaturesModule'
    },
    {
        path: '**',
        redirectTo: 'login'
    },
];

export const routing = RouterModule.forRoot(routes);

当用户最初加载应用程序时，他们将根据延迟加载功能模块中的路由保护自动发送到登录部分。建议的canActivate处理此路由保护

canActivate() {
    console.log('Asessing route guard status: ', this.auth.isAuthenticated());
    if (!this.auth.isAuthenticated()) {
        // If the local storage doesnt contain a token. Return to login
        console.log('Route is not permitted. Violation of permissions');
        this.router.navigate(['login']);
        return false;
    }
    console.log('Route is permitted. Guard lowering block');
    return true
}

在我的应用程序模块组件模板中，我有非常基本的子路由设置

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

在我的features.component.html中，我创建了以下父结构，其中app nav包含header和nav（header很小，所以我很懒，并合并到一个组件中）：

然后，将在app.routing.ts上设置防护

有人能帮忙吗？对于我来说，它只是介于所有教程和未知之间，我觉得它们可以在小应用程序的开始阶段提供帮助，但随着您的扩展，教程似乎没有涵盖更复杂的场景，很难获得超过登录的可靠的大规模（现实的）示例，注册和一些英雄列表，您可以使用master/detail查看

import { Routes } from '@angular/router';
import { TasksComponent } from './tasks';
import { FeaturesComponent } from './features.component';
import { AuthGuard } from '../guards/auth.guard';
import { ViewTaskCompoment } from '../components/view-task/view-task.component';
import { HomeComponent } from './home/home.component';
import { RouterModule } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        component: FeaturesComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                component: HomeComponent,
                data: { breadcrumb: 'Home' }
            },
            {
                path: 'tasks',
                component: TasksComponent,
                data: { breadcrumb: 'Tasks' },
                children: [
                    {
                        path: 'view/:taskID',
                        component: ViewTaskCompoment,
                        data: { breadcrumb: 'View Task' },
                    }
                ]
            },
            {
                path: 'groups',
                // Groups component not created yet
                component: TasksComponent,
                data: { breadcrumb: 'Groups' }
            },
            {
                path: 'user',
                // User component not created yet
                component: TasksComponent,
                data: { breadcrumb: 'User' }
            },
            {
                path: 'options',
                // Options component not created yet
                component: TasksComponent,
                data: { breadcrumb: 'Options' }
            },
            {
                path: 'calendar',
                // Calendar component not created yet
                component: TasksComponent,
                data: { breadcrumb: 'Calendar' }
            },
        ]
    },
];
export const FeaturesRouting = RouterModule.forChild(routes);

<div class="page-wrapper">
    <app-nav></app-nav>
    <div class="main-body">
        <div class="flex-container">
            <!-- <breadcrumbs></breadcrumbs> -->
        </div>
        <router-outlet></router-outlet>
    </div>
</div>

import { Routes } from '@angular/router';
import { TasksComponent } from './tasks';
import { FeaturesComponent } from './features.component';
import { AuthGuard } from '../guards/auth.guard';
import { ViewTaskCompoment } from '../components/view-task/view-task.component';
import { HomeComponent } from './home/home.component';
import { RouterModule } from '@angular/router';

const routes: Routes = [
        {
            path: '',
            component: HomeComponent,
            data: { breadcrumb: 'Home' }
        },
        {
            path: 'tasks',
            component: TasksComponent,
            data: { breadcrumb: 'Tasks' },
            children: [
                {
                    path: 'view/:taskID',
                    component: ViewTaskCompoment,
                    data: { breadcrumb: 'View Task' },
                }
            ]
        },
        {
            path: 'groups',
            // Groups component not created yet
            component: TasksComponent,
            data: { breadcrumb: 'Groups' }
        },
        {
            path: 'user',
            // User component not created yet
            component: TasksComponent,
            data: { breadcrumb: 'User' }
        },
        {
            path: 'options',
            // Options component not created yet
            component: TasksComponent,
            data: { breadcrumb: 'Options' }
        },
        {
            path: 'calendar',
            // Calendar component not created yet
            component: TasksComponent,
            data: { breadcrumb: 'Calendar' }
        },
];
export const FeaturesRouting = RouterModule.forChild(routes);