Question

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

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

我的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
}

在我的app模块组件模板中，我有非常基本的子路由设置。

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

我这样做是因为我不希望在登录或注册部分公开任何导航栏，页眉或页脚。要素模块应包含这些内容，并且只有在路线通过后卫后才能访问。

我希望我的子模块成为＆＃34;登录＆＃34;模块，所以这应该是这些组件所在的位置。

我的问题是我不确定正确实现此目的的方法是什么？ 99％的关于这个主题的教程建议使用* ngIf隐藏父母的导航栏，如果用户没有登录但是我不喜欢这种方法。感觉有点脏。此外，在我的应用标题中，我定义了一个＆＃34; Hi用户名＆＃34;部分，它只是感觉像登录或注册不应与这些共享模板空间。

到目前为止，我已经取得了一个成功的例子，但我觉得我错过了将事情剪辑在一起的东西。

在我的功能子模块中，我声明所有组件和导入等..以及子模块路由。目前我还没有建立除基本视图之外的其他内容，所以想象一下如果你愿意它会如何扩展：

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);

在我的features.component.html中，我创建了以下父结构，其中app-nav包含标题和导航（标题很简单所以我很懒惰并合并为一个组件）：

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

我对这里发生的事情的理解是 - 用户成功登录后，他们被auth.service.ts注入重定向，功能模块被加载，路由器守卫允许路径＆＃39;＆＃39 ;对于包含公共布局的FeaturesComponent，子组件也会加载，因为它们共享相同的路径：＆＃39;＆＃39;。

这很有效。经过几个小时的努力，尝试稍微调整一下并熟悉路由系统。

这是实现这一目标的建议方法吗？我觉得好像子模块应该能够像AppModule那样引导它唯一的模板，这里定义了公共布局，并且features.routing.ts文件将变成这样：

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);

然后，警卫将设置在app.routing.ts上？

任何人都可以帮忙吗？它只是介于所有教程和未知之间的某个地方，我觉得他们可以在小应用程序的开始时提供帮助，但是当你扩展它时，似乎教程不会涵盖更复杂的场景和很难获得超过登录，注册和一些英雄列表的可靠的大规模（实际）示例，您可以使用主/详细信息查看。

角度子模块父组件

0 个答案: