8

我正在做我的一个小项目，以了解更多关于 Angular 的知识，但我真的不知道如何实现多级路由。

我已经阅读了有关路由器组件新版本的文档以及 StackOverlfow 上的其他一些主题（first、second、third），但我找不到解决我的问题的方法。

让我们考虑以下应用程序结构，而不考虑Test和Test2块。

应用结构

让我们考虑一下我的应用程序的组件如下：

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { MyAppComponent } from './my-app/my-app.component';
import { APP_ROUTER_PROVIDERS } from './my-app/my-app.routes';

bootstrap(MyAppComponent, [ APP_ROUTER_PROVIDERS ])
    .catch(err => console.error(err));

我的应用程序.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES],
})

export class MyAppComponent { }

我的应用程序.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';

import { AdminRoutes} from './admin/admin.routes';

export const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'sign-up', component: SignUpComponent },
  ...AdminRoutes,
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

admin.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'admin',
    template: 'Hello I am ADMIN <br> <router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})

export class AdminComponent { }

admin.routes.ts

import { RouterConfig } from '@angular/router';

import { AdminComponent } from './admin.component';
import { MainPageComponent } from './main-page/main-page.component';
import { SettingsComponent } from './settings/settings.component';

export const AdminRoutes: RouterConfig = [
  {
      path: 'admin',
      component: AdminComponent,
      children: [
        { path: 'main-page', component: MainPageComponent },
        { path: 'settings', component: SettingsComponent },
      ]
  }
];

主页.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'main-page',
    template: 'Hello I am MAIN PAGE!!!'
})

export class MainPageComponent { }

settings.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'settings',
    template: 'Hello I am SETTINGS!!!'
})

export class SettingsComponent { }

当我尝试使用这样的配置时，没有任何效果，并且浏览器的控制台充满了错误。

仅当我在admin.routes.ts中添加children[...]时才会发生这种情况，我认为问题就在那里。

  1. 你能给我一些关于如何正确实施的提示吗？
  2. 我错过了什么吗？
  3. 有没有更好的办法？

提前感谢您的帮助，我希望我在帖子中写的内容有助于理解我的问题！

4

1 回答 1

7

Angular 路由器将带有子节点的路由视为非终端路由，并且路由仅发生在终端路由上。Angular 路由器期望路由有一个默认的path: ''.

要解决此问题，您应该添加从父路由到子路由之一的重定向。 

export const AdminRoutes: RouterConfig = [
{
    path: 'admin',
    component: AdminComponent,
    children: [
        { path: '', redirectTo: 'main-page', terminal: 'true' },
        { path: 'main-page', component: MainPageComponent,
        { path: 'settings', component: SettingsComponent },
    ]
 }];

编辑：如果使用 rc4 和路由器 3.0.0-beta2 他们已重命名terminal为pathMatch. 所以更新重定向路由如下：

{ path: '', redirectTo: 'main-page', pathMatch: 'full'},
于 2016-07-03T17:46:23.400 回答