Angular 父路径为空的角度命名路由器出口 设置：

版本：5.2.1

错误消息 未捕获（承诺中）：错误：无法匹配任何路由。URL段：“loginpopup”

此问题似乎与以下行有关：

this._router.navigate([{ outlets: { login: ['loginpopup'] } }], { relativeTo: this.route });

我尝试过使用以下内容，但仍然没有看到：

this._router.navigate([{ outlets: { login: ['loginpopup'] } }]);

this._router.navigate(['/', { outlets: { login: ['loginpopup'] } }]);

this._router.navigate(['/', '' ,{ outlets: { login: ['loginpopup'] } }]);

该问题与将外壳组件的路径更改为“任何内容”并将代码更改为以下内容时，在根级别将父路径设置为“”有关（请参见下面的代码）：

this._router.navigate(['/', 'anything' ,{ outlets: { login: ['loginpopup'] } }]);

我能够成功使用指定的插座

代码 App.routings.ts

export const appRoutes: Routes =
[
    // Primary Routes
    {
        path: '',
        component: ShellComponent,
        data:
        {
            WebsiteTitle: 'Core'
        },
        children:
        [
            {
                path: 'loginpopup',
                outlet: 'login',
                component: LoginComponent,
            },
            {
                path: 'login',
                component: LoginComponent,
                children: [

                ]
            }
        ]
    }
]

import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef
} from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs";
import { AutoUnsubscribe } from "ngx-auto-unsubscribe";
import {
  AuthenticationEventService,
  AuthSessionStorageService
} from "interpackages/secure";
import { relative } from "path";

/**
 *
 *
 * @export
 * @class ShellComponent
 */
@Component({
  templateUrl: "shell.component.html",
  selector: "shell",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShellComponent {
  public isLogin: boolean = false;

  /**
   *
   * Creates an instance of ShellComponent.
   * @param {Router} _router
   * @param {ChangeDetectorRef} changeRef
   * @memberof ShellComponent
   */
  constructor(
    private _authenticationEventService: AuthenticationEventService,
    private changeRef: ChangeDetectorRef,
    private _autSessionStorage: AuthSessionStorageService,
    private _router: Router,
    private route: ActivatedRoute,
  ) {
    this.isLogin = this._autSessionStorage.AuthenticationInfo.IsSignedIn;
    if (!this.isLogin) {
       this._router.navigate([{ outlets: { login: ['loginpopup'] } }], { relativeTo: this.route });
    } else {
      this._router.navigate(['/', { outlets: { login: null } }]);
    }

    this._authenticationEventService.AuthenticationInfo.subscribe(authUser => {
      this.isLogin = authUser.IsSignedIn;
      if (!authUser.IsSignedIn) {
        this._router.navigate(['/',{ outlets: { login: ['loginpopup'] } }]);
      } else {
        debugger;
        this._router.navigate([{ outlets: { login: null } }]);
      }
      this.changeRef.detectChanges();
    });
  }

  /**
   * For when component is destoried. Also Requied for  AutoUnsubscribe to work on AOT Build
   * @memberof ShellComponent
   * @method ngOnDestory
   *
   */
  ngOnDestroy() {}
}

应用程序组件

<router-outlet></router-outlet>
<router-outlet name="dialog"></router-outlet> 

---

不幸的是，angular github存储库中存在一个与此相关的开放问题

你唯一能做的就是把基本路径命名为ie

export const appRoutes: Routes = [ {
   path: 'myroute', // NO Longer Empty Path
   component: ShellComponent,
   data:  { WebsiteTitle: 'Core' },
   children: [  ...  ]
}];

---

找到角度标准的解决方法：

与空路由器出口相关的问题。您还需要知道，相对路径仅与路由器树（ActiveRoutes）相关，而不是与URL相关。考虑到这一点，我创建了一个helper函数来解决这个问题，直到它在Angular 6.1中得到修复

从'@angular/Router'导入{Router，ActivatedRoute}；
/**
*
*角相对路径时间解。Angular不喜欢空路径。
*应在版本6拉动请求22394中修复
* https://github.com/angular/angular/pull/22394
*
*角度问题：https://github.com/angular/angular/issues/13011#issuecomment-274414952
*
*在删除之前，请检查命名出口上的相对路径。使用“在命名的对象上导航”
*出口当前与次级路线相关（出口：路线/测试）
*这意味着不可能使用.././像中记录的那样爆发
*自己的文件
*
*关键信息：这是相对于像anuglar这样的路由，而不是URL路径
*
*Bug只与去父级和下树有关
*
*@export NavigateByRelative
*@param{string}路径
*@param{Router}路由器
*@param{ActivatedRoute}路由
*
*/
导出函数NavigateByRelative（路径：字符串，路由器：路由器，路由：ActivatedRoute）{
/**
*根据角度文档，相对路径应始终以“../”开头
* https://angular.io/guide/router#relative-航行
*/
if（path.startsWith（“../”）{
//将路径拆分为多个路径
常量路径=路径分割（'/'）；
//长度减1，因为我们保证需要最后一个索引
const totalPathToLastinex=path.length-1；
//当前索引，以便稍后我们可以从这里开始
让当前路径索引；
//相对于是，因此我们可以找到正确的父对象
让relativeTo=路线；
//检查其是否为父级，以及当前路径是否仍打算返回树
对于（currentPathIndex=0；
currentPathIndex

export const appRoutes: Routes = [ {
   path: 'myroute', // NO Longer Empty Path
   component: ShellComponent,
   data:  { WebsiteTitle: 'Core' },
   children: [  ...  ]
}];