期望的行为：

我能够在面包屑中显示当前路径.

我想用我的路由规则绑定我的痕迹,如下所示：

问题是可能存在无限数量的嵌套文件夹,因此我无法使用静态路由规则.

如何创建这样的规则,我可以检索未定义数量的参数以获取当前文件路径？

我希望能够直接使用此url启动应用程序：localhost：4200 / files / images / myfolder / test /并检索路径,以便我可以直接获取此特定文件夹.

我做了什么：

我只对文件页面有这个简单的路由规则：

const filesRoutes: Routes = [
  { path: 'files',component: FilePageComponent }
  // I need something like that
  { path: 'files/:folder1/:folder2/[...]',component: FilePageComponent } 
];

我当前文件夹的路径只是一个文件数组：this.stackFolder：Array< MyFile>.这就是我获取面包屑内容的方式.

我已经阅读了有关路由的整个angular.io文档,还阅读了有关添加动态路由规则的一些问题.

Plunker Example

我认为最好的方法是使用LazyLoading.

>它使您可以进行模块的递归加载.就像文件夹三
>其次,您只能为所有文件夹视图实现一个组件
>这种方法的性能更好,因为您的应用程序不需要在死记硬背之前加载所有模块.
>您可以使用路由参数：id来创建文件夹的正确链接.

看一个例子我希望这可以帮到你

附：我用了一个例子,一个孩子< router-outlet>但我认为你不需要这样做.我只是举例说.

authentication.service.ts：

redirectUser(username:string):void {
  // Redirect user to profile on successful login
  this.router.navigate(['../Profile/Feed',{username: username}]);
}

这一切都很好,但自从我在ProfileComponent中引入了一些子路由以来,我遇到了一些错误.
首先,这是我的AppComponent与RouteConfig：

app.ts：

import {Component,ViewEncapsulation} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

import {HomeComponent} from '../home/home';

import {AuthenticationService} from '../../services/authentication.service';
import {LoginComponent} from '../login/login';
import {ProfileComponent} from '../profile/profile';
import {ProfileService} from '../../services/profile.service';

@Component({
  selector:      'app',viewProviders: [AuthenticationService,ProfileService,HTTP_PROVIDERS],encapsulation: ViewEncapsulation.None,directives:    [
    ROUTER_DIRECTIVES
  ],templateUrl:   './components/app/app.html'
})

@RouteConfig([
  {path: '/',component: HomeComponent,as: 'Home'},{path: '/inloggen',component: LoginComponent,as: 'Login'},{path: '/profile/:username/...',component: ProfileComponent,as: 'Profile'}
])

export class AppComponent {
  ...
}

如您所见,在ProfileComponent中定义了一些新路由.如下图所示：

ProfileComponent.ts：

import {Component,OnInit} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES,RouteParams,RouterLink,RouterOutlet} from 'angular2/router';
import {ProfileService} from '../../services/profile.service';
import {PROFILE_IMAGES} from '../../constants/constants';
import {WorkoutsComponent} from '../workouts/workouts';
import {FeedComponent} from '../Feed/Feed';

interface IProfileVM {
  username: string;
  profileUser: Object;
  getProfileData(username:string): void;
}

@Component({
  selector:    'profile',templateUrl: './components/profile/profile.html',directives:  [RouterOutlet,RouterLink],providers:   [ProfileService]
})

@RouteConfig([
  {path: '/nieuwsFeed',component: FeedComponent,as: 'Feed'},{path: '/workouts',component: WorkoutsComponent,as: 'Workouts'}
])

export class ProfileComponent implements OnInit,IProfileVM {

  public username:string;
  public profileUser:any;

  constructor(private _profileService:ProfileService,private _params:RouteParams) {
    this.username = this._params.get('username');
  }

  ngOnInit() {
    this.getProfileData(this.username);
  }

  getProfileData(username) {
    // Do stuff..
  }
}

所以这里的问题是,在我在ProfileComponent中引入一些子路由之前,一切正常.用户被重定向,用户名出现在URL中,一切正常.但是因为我添加了这些子路由,我收到以下错误：

“用户名’的路由生成器未包含在传递的参数中.”

很高兴有人可以帮助我！提前致谢！

因此父组件路由将丢失：配置文件路由中的用户名,如下所示：

@RouteConfig([
  {path: '/',{path: '/profile/...',as: 'Profile'}
])

相反,您的配置文件组件将定义：username route参数：

@RouteConfig([
  {path: '/:username/nieuwsFeed',{path: '/:username/workouts',as: 'Workouts'}
])

这种方法看起来更直观,并且可以减少在嵌套路由组件之间导航的问题.

const routes: Routes = [
 { path: 'blog/:id',component: BlogComponent },{ path: 'blog/moo',component: MooComponent },];

并且有以下信息：

If we visited /blog/moo we would show MooComponent even though it
matches the path for the first blog/:id route as well.

Important Non-parameterised routes take precedence over parameterised
routes.

不幸的是,它并不像那样.如果我将转到url blog / moo,那么路由会将moo视为Id并将打开BlogComponent.

我想知道如何解决我有两个想法：

>我可以改变路径.博客/身份证和博客/ moo.
>我可以使用UrlMatcher但是当我更改previos url段时可能会有些问题.所以这个功能应该做好充分准备.

你怎么看？有任何想法吗？

路由器选择具有第一个匹配获胜策略的路由.

>

The router selects the route with a first match wins strategy.
Wildcard routes are the least specific routes in the route
configuration. Be sure it is the last route in the configuration.

>

The order of the routes in the configuration matters and this is by
design. The router uses a first-match wins strategy when matching
routes,so more specific routes should be placed above less specific
routes. In the configuration above,routes with a static path are
listed first,followed by an empty path route,that matches the
default route. The wildcard route comes last because it matches every
URL and should be selected only if no other routes are matched first.

Even this explains the same regarding the route prioritization

所以你应该按照相反的顺序保持你的路线：

const routes: Routes = [
 { path: 'blog/moo',{ path: 'blog/:id',];

我想强调上述陈述中的一点：

注意：

更具体的路线应放在不太具体的路线上方.

由于’blog / moo’更具体,您需要将其放在’blog /：id’上方

I have created a PLUNKER for your example