Question

我有一个用于路由的服务

export class WetterRoutingService {

    private currentUser: User;
    private defaultAbm: Abm;
    public rerouteToDefaultOnLoad: boolean = false;
    constructor (@Inject(UserService) private userService: UserService,
    @Inject(UiDataStore) private uiDataStore: UiDataStore, private router: Router) {
        // get User Data and relevant data
}

我在此服务中创建了一个函数来路由到我经常使用的某些路由（链接根据用户和数据动态变化）

public routeToAbmAuxMaps(id) {
    this.router.navigate( [ '/start', DATA_CONSTANTS.some_constant, id, {outlets: { aux: ['maps']}}] );
}

我定义了以下路线：

export const ROUTES: Routes = [

  {
    path: '',
    redirectTo: '**',
    pathMatch: 'full'
  },

  {
    path: 'start/:type/:abm',
    component: AbmBlock,
    canActivate: [UserService],
    resolve: {
      model: AbmBlockResolver
    },
  },
  // some other routes
   {
     path: 'maps',
     component: MapsDetailBlock,
     outlet: 'aux'
  },
  {
    path: '**',
    component: AbmBlock,
    resolve: {
      data: AbmBlockResolver
    },
  }
];

和app.html中的路由器插座

        <div class="main-container" id="main-container">
            <div  class="main-panel">
                <router-outlet (activate)="onMainActivate($event)"></router-outlet>
            </div>
        </div>
        <div class="detail-container" id="detail-container">
            <div  class="detail-panel">
                 <router-outlet name="aux" (activate)="onDetailActivate($event)"></router-outlet>
            </div>
        </div>

但是，当调用此函数时，路由器会将其解析为

BaseUrl/#/start/constant/id

我所期待的是

BaseUrl/#/start/constant/id(aux:maps)

这是我应该在GitHub上发布的Bug还是我做错了什么？

Angular 2.4.3 TS 2.1.5

e：格式化

Answer 1

您应该将outlets对象更改为:( aux不是数组）

{outlets: { aux: 'maps'}}

Answer 2

尝试一下：

public routeToAbmAuxMaps(id) { this.router.navigate( [ '/start', {outlets: { aux: ['maps'], primary: [DATA_CONSTANTS.some_constant, id]}}] ); }

进入父路由后，

将路由器基本分为主要和 aux

router.navigate不会更改辅助路由

2 个答案: