我的app组件中有以下代码.

我想隐藏特定路线的导航栏和顶部栏.

是否可以在app.component.ts中获取当前激活的路由？如果是的话,怎么样？

如果不可能,有没有解决方案来解决这个问题(使用警卫或其他什么……)？

还要记住,它应该是被动的.当我切换到另一个路线边栏时,导航栏应该再次显示.

在app.component.ts中

import { Component } from '@angular/core';
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
import { filter,map,mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,private activatedRoute: ActivatedRoute,) {
    this.showSidebar$= this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),map(() => activatedRoute),map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),mergeMap(route => route.data),map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),)
  }

app.component.html

<aside *ngIf="showSidebar$| async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

应用路线

RouterModule.forRoot([
  { path: 'with-sidebar',component: WithSidebarComponent,data: { showSidebar: true } },{ path: 'without-sidebar',component: WithoutSidebarComponent,data: { showSidebar: false } },{ path: 'without-data',component: WithoutDataComponent },])

您可以随意修改它.

Live demo

模板：’< router-outlet>< / router-outlet>< router-outlet name =“popup”>< / router-outlet>‘

我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局组件,以便我可以在所有页面上重复使用它,并使用loadChildren加载相应的模块和组件.

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div>
  <router-outlet></router-outlet>
</div>

问题是当我将弹出插座的routerLinks移动到菜单中时,它包含主路径的尾部斜杠,结果url不起作用.所以例如这个routerLink：

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

创建url’localhost / mainroute(popup：login)'(如果它放在app组件中)和’localhost / mainroute /(popup：login)'(如果它放在菜单组件中).

当第一个网址有效时,第二个网址会产生错误：
错误：无法匹配任何路线：’mainroute’

我不明白为什么它以不同的方式处理这两种情况.我也不明白,即使url’localhost / mainroute /’工作,第二个生成的url也不会因为斜杠.

有人能帮我吗？

建议的解决方案是使用这样的相对链接：

<a [routerLink]="['../',{ outlets: { popup: 'login' } }]">

或使用这样的绝对链接：

<a [routerLink]="['/',{ outlets: { popup: 'login' } }]">

在这里描述的情况下,绝对链接工作并给出了正确的链接.

我仍然不明白这种行为.所以,如果有人有一个很好的解释,请详细说明.

我有一个父组件,将在该页面上的路由器插座中显示子路由组件.

单击时,有2个按钮将使用子组件填充路由器插座.如何将内容放置在路由器插座内部,例如. “单击选项以显示数据”,然后单击该按钮后此消息将清除,子组件将显示在路由器插座中？

<div>
    <div>
        <divrouterLink="/unpaid/people">
            View People
        </div>
        <divrouterLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

编辑
这是我的路线

path: 'unpaid',component: UnpaidBillsComponent,children: [
      {path: 'people',component: UnpaidPeopleComponent},{path: 'bills',component: UnpaidBillListComponent}
    ]

default text inside the router-outlet until it is populated

首先,你的假设是错误的,内容不是插在插座内,而是插在插座下面.

您无法在模板中设置默认内容,但可以设置包含默认内容的默认路由.只需使用路径：”并使用带有“默认”模板的组件.

使用您需要的“默认”模板创建组件：

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

并将其添加到您的路线.

children: [
  {path: '',component: DefaultTemplateComponent},{path: 'people',component: UnpaidBillListComponent},]

应用路由配置

const routes: Routes = [
  {path: 'stories',component: StoriesComponent},{path: '',component: EnterOverviewComponent,children: [
      {path: 'login',component: LoginComponent,outlet: 'login'},{path: 'register',component: RegisterComponent,outlet: 'register'},]}
];

应用程序根

<app-navbar></app-navbar>

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>

Navbar comp.

期待这里的错误.我怀疑,我称之为虚假路线：

<ul>
  <lirouterLinkActive="active">
    <arouterLink="/,{outlets: {login: ['login']}}">Sign In</a>
  </li>
  <lirouterLinkActive="active">
    <arouterLink="/,{outlets: {register: ['register']}}">Register</a>
  </li>
</ul>

<a [routerLink]="[{ outlets: { example: ['example1'] } }]">Example</a>

在你的情况下

<a [routerLink]="[{ outlets: { register: ['register'] } }]">Example</a>//outletName:['route-path']

EDITED

相对于ROOT路线的命名儿童出口不起作用,看起来像BUG

comments section中提到了一种解决方法.

要么

你可以改变下面的配置 –

{
    path: '',component: LoginComponent
 },{
    path: 'example1',component: ExampleComponent,outlet: 'example'
 }

模板：’< router-outlet>< / router-outlet>< router-outlet name =“popup”>< / router-outlet>‘

我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局组件,以便我可以在所有页面上重复使用它,并使用loadChildren加载相应的模块和组件.

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div>
  <router-outlet></router-outlet>
</div>

问题是当我将弹出插座的routerLinks移动到菜单中时,它包含主路径的尾部斜杠,结果url不起作用.所以例如这个routerLink：

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

创建url’localhost / mainroute(popup：login)'(如果它放在app组件中)和’localhost / mainroute /(popup：login)'(如果它放在菜单组件中).

当第一个网址有效时,第二个网址会产生错误：
错误：无法匹配任何路线：’mainroute’

我不明白为什么它以不同的方式处理这两种情况.我也不明白,即使url’localhost / mainroute /’工作,第二个生成的url也不会因为斜杠.

有人能帮我吗？

建议的解决方案是使用这样的相对链接：

<a [routerLink]="['../',{ outlets: { popup: 'login' } }]">

或使用这样的绝对链接：

<a [routerLink]="['/',{ outlets: { popup: 'login' } }]">

在这里描述的情况下,绝对链接工作并给出了正确的链接.

我仍然不明白这种行为.所以,如果有人有一个很好的解释,请详细说明.

我有一个父组件,将在该页面上的路由器插座中显示子路由组件.

单击时,有2个按钮将使用子组件填充路由器插座.如何将内容放置在路由器插座内部,例如. “单击选项以显示数据”,然后单击该按钮后此消息将清除,子组件将显示在路由器插座中？

<div>
    <div>
        <divrouterLink="/unpaid/people">
            View People
        </div>
        <divrouterLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

编辑
这是我的路线

path: 'unpaid',component: UnpaidBillsComponent,children: [
      {path: 'people',component: UnpaidPeopleComponent},{path: 'bills',component: UnpaidBillListComponent}
    ]

default text inside the router-outlet until it is populated

首先,你的假设是错误的,内容不是插在插座内,而是插在插座下面.

您无法在模板中设置默认内容,但可以设置包含默认内容的默认路由.只需使用路径：”并使用带有“默认”模板的组件.

使用您需要的“默认”模板创建组件：

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

并将其添加到您的路线.

children: [
  {path: '',component: DefaultTemplateComponent},{path: 'people',component: UnpaidBillListComponent},]

const routes: Routes = [
    {
        path: 'login',component: LoginViewComponent
    },{
        path: 'main',component: MainComponent,children:
        [
            {
                path: 'unit_list',component: ListViewComponent
            },{
                path: 'unit_info',component: UnitInfoComponent,children:
                [
                    {
                        path: 'patient',component: PatientDetailsComponent
                    }
                ]
            }
        ]
    },{
        path: '',redirectTo: 'main',pathMatch: 'full'
    }
];

以下是我的app.module的样子：

@NgModule({
    imports: [
        browserModule,FormsModule,HttpModule,MainModule,routing
    ],declarations: [
        AppComponent,LoginViewComponent
    ],bootstrap: [AppComponent]
})

和main.module

@NgModule({
    imports: [
        CommonModule,RouterModule
    ],declarations: [
        ListViewComponent,MainComponent,PatientDetailsComponent,UnitInfoComponent,]
})

问题是我无法管理让router.navigateByUrl函数工作.

我在PatientDetailsComponent中有ngOnInit()函数,它检查患者是否为空,如果是,那么我称之为“this.router.navigateByUrl(”/ main / unit_info“)”,但它会在标题中抛出错误：“无法激活一个已经激活的插座“.它在Angular 2.1.1中运行良好,但是当我升级到2.4.X时似乎没有解决我的问题.我也不确定这条路由是否正确,因为我有点迷路.

这是我的整个路由在升级到2.4.X：http://pastebin.com/Y377STcW之前的样子

你会在Chrome控制台中看到类似的内容：

core.js:1440 ERROR Error: Uncaught (in promise): Error: Cannot
 activate an already activated outlet Error: Cannot activate an already
 activated outlet
     at RouterOutlet.activateWith (router.js:6676)
     at ActivateRoutes.activateRoutes (router.js:5765)
     at eval (router.js:5705)
     at Array.forEach (<anonymous>)
     at ActivateRoutes.activateChildRoutes (router.js:5704)

你会去检查你的路线和你的提供者和你的HTML,你不会发现任何错误.

然后突然间你会发生！

然后您将在控制台窗口中向上滚动.你会看到从屏幕顶部推出的真正错误：

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'foo' of null
TypeError: Cannot read property 'foo' of null

然后查找与您的组件对应的.ts文件,单击它,它将带您直接返回代码行并显示错误.

换句话说,路由器无法承受构建组件期间发生的错误. ngInit方法可能有不同的结果 – 尚未测试.在任何一种情况下,路由都很好:-)

我的app组件中有以下代码.

我想隐藏特定路线的导航栏和顶部栏.

是否可以在app.component.ts中获取当前激活的路由？如果是的话,怎么样？

如果不可能,有没有解决方案来解决这个问题(使用警卫或其他什么……)？

还要记住,它应该是被动的.当我切换到另一个路线边栏时,导航栏应该再次显示.

在app.component.ts中

import { Component } from '@angular/core';
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
import { filter,map,mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,private activatedRoute: ActivatedRoute,) {
    this.showSidebar$= this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),map(() => activatedRoute),map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),mergeMap(route => route.data),map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),)
  }

app.component.html

<aside *ngIf="showSidebar$| async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

应用路线

RouterModule.forRoot([
  { path: 'with-sidebar',component: WithSidebarComponent,data: { showSidebar: true } },{ path: 'without-sidebar',component: WithoutSidebarComponent,data: { showSidebar: false } },{ path: 'without-data',component: WithoutDataComponent },])

您可以随意修改它.

Live demo

我可以使用路由器模块中的以下代码完成此操作：

{ path: 'show-dir/:dir1',component: ViewDirectoryComponent },{ path: 'show-dir/:dir1/:dir2',{ path: 'show-dir/:dir1/:dir2/:dir3',{ path: 'show-dir/:dir1/:dir2/:dir3/:dir4',component: ViewDirectoryComponent }
....

但是,这是有限的,因为我手动输入每个级别,并且不希望有100个手动条目(然后限制100个嵌套目录…)

有没有更好的方法来实现这一目标？

谢谢你的帮助.

就像是：

{
    path: 'show-dir',children: [
        { path: '**',component: ViewDirectoryComponent }
    ]
}

您有root show-dir路径,对于您指定的子目录**将匹配任何路由并加载视图目录组件.使用ActivatedRoute获取并解析URL以显示相关内容.

export class Expression {
    selector: string;
    constraint: string;
    value: string;
    children: Expression[];
}

因此,当选择此ConditionSet时,我想“移动”或将其复制到Expression.children.现在,如果我通过添加一个来调试this.log this.expressions,它看起来如下：

但是就像你看到中间选择框是嵌套的,并且arrivalDate必须嵌套在conditionSet.children中,如下所示：

Expression { 
selector: "conditionSet",value:"" 
children: 
          selector:"ArrivalDate",value:"" 
 }

嵌套的addButton也必须将它推送到.children来创建嵌套内容.

我这样想,但这不起作用:(：

if(this.expression.selector === 'conditionSet'){
            this.prototypes = this.prototypes.children;
            console.log(this.prototypes);
        }

有人可以帮我解决这个问题,我真的对这个问题感到绝望.

这是PLUNKER

此外,我认为您没有正确管理数据的递归方面.

对于ExpressionBuilderComponent组件,您需要为表达式组件的expressions参数提供expresion.children数组：

<expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expression.children"></expression>
<button(click)="addExpression()">Add Expression</button>

必须对ExpressionComponent本身进行相同的操作：

<div>
  <select[(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
    <option *ngFor="#p of prototypes" [value]="p.selector">
      {{ p.selectorName }}
    </option>
  </select>
</div>

<div *ngIf="prototype?.valueType === 'Set'">
  <div [ngClass]="{'nested-expression': prototype?.valueType === 'Set'}">
    <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expression.children"></expression>
    <button(click)="addExpression()">Add Expression</button>
   </div>
 </div>

看到这个plunkr：https://plnkr.co/edit/zGcoZD?p=preview.

编辑

关于删除,您需要处理自定义事件(@Ouput)来执行此操作,因为您需要从父项的子项中删除该元素：

<div>
  <button(click)="deleteExpression()">Delete</button>
</div>

<div *ngIf="prototype?.valueType === 'Set'">
  <div [ngClass]="{'nested-expression': prototype?.valueType === 'Set'}">
    <expression *ngFor="#expression of expressions"
            [prototypes]="prototypes"
            [expression]="expression"
            [expressions]="expression.children"
            (expressionDeleted)="onExpressionDeleted(expression)">
    </expression>
    <button(click)="addExpression()">Add Expression</button>
  </div>
  <div>{{expression | json}}</div>
</div>

在组件中：

export class ExpressionComponent implements OnInit {
  (...)
  @Output() expressionDeleted: EventEmitter = new EventEmitter;

  (...)

  deleteExpression() {
    this.expressionDeleted.emit();
  }

  onExpressionDeleted(expression) {
    var index = this.expressions.indexOf(this.expression);
    this.expressions.splice(index,1);
    console.log(index);
  }
}

请参阅此plunkr以进行删除：https://plnkr.co/edit/rQCILc?p=preview.

{
  path: ':group',component: ArticleListComponent,children: [{
      path: ':subgroup',children: [{
          path: ':chapter',children: [{
              path: ':section',children: [
              ]
            }
          ]
        }
      ]
    }
  ]
},

我使用相同的组件来列出文章,因为模板和代码不会改变,但我想使用url来过滤这些文章.应用程序应该使用路由参数而不是获取参数.有了这些参数,我想调用一个API来获取属于这个url的文章：/ group1 / subgroup1 / chapter1 / section1.

问题是我只使用以下代码获取这些参数：

const params = this.route.snapshot.params;
// {group: "group1"}

const params = this.route.parent.snapshot.params;
// {}

const params = this.route.firstChild.snapshot.params;
// {group: "group1",subgroup: "subgroup1"}

我怎么能一次得到所有这些参数？

routing.ts

{
  path: '',component: ArticleListComponent
}

文章-list.component.ts

constructor(route: ActivatedRoute) {
  route.queryParams.pipe(
    map(({ group,subgroup,chapter,section }) => 
      ({ group,section }))
  ).subscribe( ... )
}

<!doctype html>
<html ng-app='bugapp' ng-controller='BugAppCtrl'>
<head>
  <script src='//code.jquery.com/jquery-1.10.1.min.js'></script>

  <!-- Angular 1.2.11 -->
  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js'></script>

  <!-- UI router 0.2.8 -->
  <script src='//cdn.jsdelivr.net/angular.ui-router/0.2.8/angular-ui-router.js'></script>

  <script>
angular.module('bugapp',['ui.router'])
  .run(function ($rootScope,$state,$stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
  })
  .config(function ($locationProvider,$stateProvider,$urlRouterProvider) {
    $locationProvider.html5Mode(false);

    $stateProvider
      .state("root",{
        abstract: true,url: "/servletContext?asUser",template: '<div ui-view></div>'  // ???
      })
      .state("root.home",url: "/home",template: "<div ng-if='hasData()' ui-view ></div>"

      })
      .state("root.home.profile",{
        url: "/profile",template: '<div>whatever</div>'
      })

  })
  .controller('BugAppCtrl',function ($scope,$stateParams,$log,$location) {
    $log.log('BugAppCtrl: constructor');

    $scope.hasData = function() {
      var res = !!$scope.foo;
      // $log.log("hasData called,returing " + res + " foo is " + $scope.foo);
      return res;
    };

    $scope.$on('$stateChangeSuccess',function () {
      $log.log("State changed! (to " + $state.current.name + ")");
      $scope.foo = 'junk';
      $scope.$broadcast("resetfoo");
    });

    $state.go('root.home.profile');
  });
  </script>
</head>
<body>
  <div ui-view></div>
</body>
</html>

>我尝试了您的代码,然后尝试降级UI的版本
路由器到0.2.7.当我使用0.2.7时,它工作.
>即使您继续使用UI路由器的0.2.8版本,如果您通过$location而不是$state执行状态更改,它也可以.这是使用$location而不是$state.go调用的示例：

$location.path('/servletContext/home/profile');

虽然我使用并推荐UI路由器(不能没有嵌套视图),但如果您在将来发现当用户尝试转到某些页面时您想要进行任何类型的拦截或重定向,我建议使用$location.路径而不是$state,原因我描述了in a blog post

编辑：我之前没有尝试过参数,只是尝试了你发布的代码(我创建了第二个控制器,并将其分配给你的’root.home.profile’状态),它的工作原理. UI路由器的说明是here.但基本上如果您在状态定义中设置URL的方式与使用UI路由器的方式相同：

url: "/profile/:foo",

然后在$location.path调用中添加路径中的参数：

$location.path('/servletContext/home/profile/12');

你可以从控制器访问12

$stateParams.foo

相反,我想在我的主应用程序组件核心中呈现路由的内容,但是如何告诉angular使用我的核心组件中的路由器插座而不是我的导航组件？

由于我的[routerLink]在此模板中：

nav.component.html：

<nav[class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
  <ul>
    <li*ngFor="#link of links">
      <a [routerLink]="link.href">
        <div>{{link.label}}</div>
        <div><i></i></div>
      </a>
    </li>
  </ul>
</nav>

它不希望将路由呈现到核心组件中：

core.component.html：

<!-- The menu -->
<nav-list></nav-list> 

<!-- The router-outlet which should render the videos component -->
<router-outlet></router-outlet>

videos.component.html：

<h1>My videos</h1>

<!-- This should render the child views of the videos component -->
<router-outlet></router-outlet>

list.videos.component.html：

<h1>Videos list</h1>

因此,您可以看到我希望将底部片段渲染到中间片段,然后在核心组件内部的顶部进行渲染.

我怎样才能做到这一点？

最重要的是,我不希望在nav组件中有路由器插座.

<shellheader (menuToggle)="onMenuToggle($event)"></shellheader>

<section id="main">
    <navigation [menuToggled]="menuToggled"></navigation>

    <section id="content">
        <div>
            <div>
                <h2>Header</h2>                    

                <router-outlet></router-outlet>

            </div>
        </div>
    </section>
</section>

<shellfooter></shellfooter>

主要布局组件代码：

@Component({
    templateUrl: "app/shell/main-layout.component.html",directives: [ROUTER_DIRECTIVES,NavigationComponent,HeaderComponent,FooterComponent]
})
@RouteConfig([
        { path: "/dashboard/...",name: "Dashboard",component: DashboardComponent,useAsDefault: true }
])
export class MainLayoutComponent {

    public menuToggled: boolean;

    public onMenuToggle(event:boolean) {
        this.menuToggled = event;
    }
}

在我的导航组件中,我有一些路由器链接(没有路由器插座,只使用routerlink指令,没有定义子路由)：

<ul>
        <li *ngFor="#navItem of navItems">
            <a [routerLink]="navItem.route">
                <i *ngIf="navItem.icon"></i>
                {{ navItem.text }}
            </a>
        </li>
    </ul>

单击这些路由器链接会更改浏览器中的路由,主组件中的插座会响应这些路由更改.

您不需要在导航组件中安装路由器插座.如果路径没有呈现给您的主要组件,则您可能没有在主要组件中包含所需的指令,例如：

import {RouteConfig,ROUTER_DIRECTIVES} from "angular2/router";

...

@Component({
    directives: [ROUTER_DIRECTIVES,...]
})

Plunker：https://plnkr.co/edit/P6Bkwy?p=info

进一步信息：https://angular.io/docs/ts/latest/guide/router.html

模板：’< router-outlet>< / router-outlet>< router-outlet name =“popup”>< / router-outlet>‘

我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局组件,以便我可以在所有页面上重复使用它,并使用loadChildren加载相应的模块和组件.

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div>
  <router-outlet></router-outlet>
</div>

问题是当我将弹出插座的routerLinks移动到菜单中时,它包含主路径的尾部斜杠,结果url不起作用.所以例如这个routerLink：

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

创建url’localhost / mainroute(popup：login)'(如果它放在app组件中)和’localhost / mainroute /(popup：login)'(如果它放在菜单组件中).

当第一个网址有效时,第二个网址会产生错误：
错误：无法匹配任何路线：’mainroute’

我不明白为什么它以不同的方式处理这两种情况.我也不明白,即使url’localhost / mainroute /’工作,第二个生成的url也不会因为斜杠.

有人能帮我吗？

建议的解决方案是使用这样的相对链接：

<a [routerLink]="['../',{ outlets: { popup: 'login' } }]">

或使用这样的绝对链接：

<a [routerLink]="['/',{ outlets: { popup: 'login' } }]">

在这里描述的情况下,绝对链接工作并给出了正确的链接.

我仍然不明白这种行为.所以,如果有人有一个很好的解释,请详细说明.

我有一个父组件,将在该页面上的路由器插座中显示子路由组件.

单击时,有2个按钮将使用子组件填充路由器插座.如何将内容放置在路由器插座内部,例如. “单击选项以显示数据”,然后单击该按钮后此消息将清除,子组件将显示在路由器插座中？

<div>
    <div>
        <divrouterLink="/unpaid/people">
            View People
        </div>
        <divrouterLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

编辑
这是我的路线

path: 'unpaid',component: UnpaidBillsComponent,children: [
      {path: 'people',component: UnpaidPeopleComponent},{path: 'bills',component: UnpaidBillListComponent}
    ]

default text inside the router-outlet until it is populated

首先,你的假设是错误的,内容不是插在插座内,而是插在插座下面.

您无法在模板中设置默认内容,但可以设置包含默认内容的默认路由.只需使用路径：”并使用带有“默认”模板的组件.

使用您需要的“默认”模板创建组件：

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

并将其添加到您的路线.

children: [
  {path: '',component: DefaultTemplateComponent},{path: 'people',component: UnpaidBillListComponent},]

const routes: Routes = [
    {
        path: 'login',component: LoginViewComponent
    },{
        path: 'main',component: MainComponent,children:
        [
            {
                path: 'unit_list',component: ListViewComponent
            },{
                path: 'unit_info',component: UnitInfoComponent,children:
                [
                    {
                        path: 'patient',component: PatientDetailsComponent
                    }
                ]
            }
        ]
    },{
        path: '',redirectTo: 'main',pathMatch: 'full'
    }
];

以下是我的app.module的样子：

@NgModule({
    imports: [
        browserModule,FormsModule,HttpModule,MainModule,routing
    ],declarations: [
        AppComponent,LoginViewComponent
    ],bootstrap: [AppComponent]
})

和main.module

@NgModule({
    imports: [
        CommonModule,RouterModule
    ],declarations: [
        ListViewComponent,MainComponent,PatientDetailsComponent,UnitInfoComponent,]
})

问题是我无法管理让router.navigateByUrl函数工作.

我在PatientDetailsComponent中有ngOnInit()函数,它检查患者是否为空,如果是,那么我称之为“this.router.navigateByUrl(”/ main / unit_info“)”,但它会在标题中抛出错误：“无法激活一个已经激活的插座“.它在Angular 2.1.1中运行良好,但是当我升级到2.4.X时似乎没有解决我的问题.我也不确定这条路由是否正确,因为我有点迷路.

这是我的整个路由在升级到2.4.X：http://pastebin.com/Y377STcW之前的样子

你会在Chrome控制台中看到类似的内容：

core.js:1440 ERROR Error: Uncaught (in promise): Error: Cannot
 activate an already activated outlet Error: Cannot activate an already
 activated outlet
     at RouterOutlet.activateWith (router.js:6676)
     at ActivateRoutes.activateRoutes (router.js:5765)
     at eval (router.js:5705)
     at Array.forEach (<anonymous>)
     at ActivateRoutes.activateChildRoutes (router.js:5704)

你会去检查你的路线和你的提供者和你的HTML,你不会发现任何错误.

然后突然间你会发生！

然后您将在控制台窗口中向上滚动.你会看到从屏幕顶部推出的真正错误：

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'foo' of null
TypeError: Cannot read property 'foo' of null

然后查找与您的组件对应的.ts文件,单击它,它将带您直接返回代码行并显示错误.

换句话说,路由器无法承受构建组件期间发生的错误. ngInit方法可能有不同的结果 – 尚未测试.在任何一种情况下,路由都很好:-)

我的app组件中有以下代码.

我想隐藏特定路线的导航栏和顶部栏.

是否可以在app.component.ts中获取当前激活的路由？如果是的话,怎么样？

如果不可能,有没有解决方案来解决这个问题(使用警卫或其他什么……)？

还要记住,它应该是被动的.当我切换到另一个路线边栏时,导航栏应该再次显示.

在app.component.ts中

import { Component } from '@angular/core';
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
import { filter,map,mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,private activatedRoute: ActivatedRoute,) {
    this.showSidebar$= this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),map(() => activatedRoute),map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),mergeMap(route => route.data),map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),)
  }

app.component.html

<aside *ngIf="showSidebar$| async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

应用路线

RouterModule.forRoot([
  { path: 'with-sidebar',component: WithSidebarComponent,data: { showSidebar: true } },{ path: 'without-sidebar',component: WithoutSidebarComponent,data: { showSidebar: false } },{ path: 'without-data',component: WithoutDataComponent },])

您可以随意修改它.

Live demo

我注意到的一个奇怪的事情是,当我通过angular路由到我的app上的不同视图时,前一个组件上的setInterval命令不会停止,从而导致服务器进行不必要的加载.

在Angular2中对路由更改停止setInterval http请求的正确方法是什么？

任何帮助将不胜感激.

The browser has inner loop,called Event Loop,which checks the queue
and processes events,executes functions etc.

因此,每当您添加任何异步事件(如setTimeout / setInterval)时,它们都会使用其处理程序添加到Event Loop.

基本上每当您想要停止/取消注册这些异步事件时,您需要手动取消注册它们.就像在这里你需要使用setInterval对象引用调用clearInterval方法,然后它只会从Event Loop中删除该异步事件.

您可以使用ngOnDestroy生命周期钩子,在破坏组件之前可以使用你的东西.

//hook gets called before Component get destroyed or you can say disposed.
ngOnDestroy(){
    clearInterval(intervalReference)
}

额外的东西(与Angular 1比较)

您可以在任何Javascript框架中看到同样的问题.在Angular 1中,有办法处理这种情况(我正在添加这些东西,以便任何来自Angular 1背景的人都可以通过比较A1和A2来轻松获得这个概念).在内部销毁控制器实例的角度时,会在元素和放大器上发出$destroy事件. $元素的范围.因此,通过监听$destroy事件,我们过去常做的事情是确保那些对象值/对象/事件不可用.

$scope.$on('$destroy',function(event){
   //do stuff here
})

element.bind('$destroy',function(event){
   //do stuff here
})

我已经发现,如果我在async false中运行ajax调用,则不显示加载div,除了Firefox显示但动画gif没有动画.

如果我在async中运行ajax调用,则返回的数据不会加载到已加载模板partial的角度模型变量中.

是否可以获得动画加载div来显示并获取加载到模型中的角度数据？

// register the interceptor as a service,intercepts ALL angular ajax http calls
.factory('myHttpInterceptor',function ($q,$window,$rootScope) {
    return function (promise) {
        $rootScope.Nowloading = true; // use ng-show="Nowloading" on element containing spinner
        return promise.then(function (response) {
            // do something on success
            $rootScope.Nowloading = false; // need to turn it off on success 
            return response;

        },function (response) {
            // do something on error
            $rootScope.Nowloading = false;  // need to turn it off on failure
            $rootScope.network_error = true;   // you might want to show an error icon.
            return $q.reject(response);
        });
    };

希望这可以帮助

– 担

1.此答案https://stackoverflow.com/a/36417240/1063354使用私有字段存储第一个请求的结果,并在所有后续调用中重用它.

代码：

private data: Data;    
getData() {
    if(this.data) {
        return Observable.of(this.data);
    } else {
        ...
    }
}

可悲的是,可观察力的力量完全被忽略了 – 你手动完成所有的东西.事实上,如果我对将结果分配给局部变量/字段感到满意,我就不会寻找合适的解决方案.
我认为一个不好的做法的另一个重要的事情是服务不应该有一个状态 – 即应该没有包含从一个调用到另一个调用的数据的私有字段.清除缓存相当容易 – 只需将this.data设置为null,即可重新执行请求.

2.这个答案https://stackoverflow.com/a/36413003/1063354建议使用ReplaySubject：

private dataObs$= new ReplaySubject(1);

    constructor(private http: Http) { }

    getData(forceRefresh?: boolean) {
        // If the Subject was NOT subscribed before OR if forceRefresh is requested 
        if (!this.dataObs$.observers.length || forceRefresh) {
            this.http.get('http://jsonplaceholder.typicode.com/posts/2').subscribe(
                data => this.dataObs$.next(data),error => {
                    this.dataObs$.error(error);
                    // Recreate the Observable as after Error we cannot emit data anymore
                    this.dataObs$= new ReplaySubject(1);
                }
            );
        }

        return this.dataObs$;
    }

看起来非常棒(再次 – 清除缓存没有问题)但我无法映射此调用的结果,即

service.getData().map(data => anotherService.processData(data))

这是因为底层观察者没有调用其完整方法.我很确定很多反应方法也不适用于此.要实际获取数据,我必须订阅此observable,但我不想这样做：我想通过解析器获取我的一个组件的缓存数据,该解析器应该返回一个Observable(或Promise),而不是订阅：

路线

{
    path: 'some-path',component: SomeComponent,resolve: {
      defaultData: DefaultDataResolver
    }
}

解析器

...
resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<Data> {
    return this.service.getData();
}

永远不会激活组件,因为它的依赖性永远不会被解析.

3.在这里https://stackoverflow.com/a/36296015/1063354我找到了一个使用publishLast().refCount()的提议.

代码：

getCustomer() {
    return this.http.get('/someUrl')
        .map(res => res.json()).publishLast().refCount();
}

这满足了我对缓存和解析的要求但是我还没有找到一个干净整洁的解决方案来清除缓存.

我错过了什么吗？任何人都可以想出一种更好的方法来缓存反应性可观察量能够映射其结果,以及一旦它不再相关就刷新缓存数据吗？

您可以像以下一样使用它：

let res = new RestResource(() => this.http.get('inline.bundleo.js'));

res.status.subscribe((loading)=>{
    console.log('STATUS=',loading);
});

res.value.subscribe((value) => {
  console.log('VALUE=',value);
});

和来源：

export class RestResource {

  static readonly LOADING: string = 'RestResource_Loading';
  static readonly ERROR: string = 'RestResource_Error';
  static readonly IDLE: string = 'RestResource_Idle';

  public value: Observable<any>;
  public status: Observable<string>;
  private loadStatus: Observer<any>;

  private reloader: Observable<any>;
  private reloadTrigger: Observer<any>;

  constructor(requestObservableFn: () => Observable<any>) {
    this.status = Observable.create((o) => {
      this.loadStatus = o;
    });

    this.reloader = Observable.create((o: Observer<any>) => {
      this.reloadTrigger = o;
    });

    this.value = this.reloader.startWith(null).switchMap(() => {
      if (this.loadStatus) {
        this.loadStatus.next(RestResource.LOADING);
      }
      return requestObservableFn()
        .map((res) => {
          if (this.loadStatus) {
            this.loadStatus.next(RestResource.IDLE);
          }
          return res;
        }).catch((err)=>{
          if (this.loadStatus) {
            this.loadStatus.next(RestResource.ERROR);
          }
          return Observable.of(null);
        });
    }).publishReplay(1).refCount();
  }

  reload() {
    this.reloadTrigger.next(null);
  }

}

所以我对路由器中的目标组件进行了这样的配置：

{
    path: 'edit-tags/:type/:name/:id',component: EditTagsComponent,},

我使用它来自另一个组件：

this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`],{ relativeto: this.route });

它工作正常,但我不想在url中显示id,还需要将更多数据传递给组件.

我也见过在路由器中使用这样的配置：

{ path: 'test-product',component: ProductsContentComponent,data: { role: 'admin',type: 'test-product' } }

但我没有找到在另一个组件中使用相同方法的示例.

那么,有没有办法在路由中将一些数据从组件传递到组件而不在URL中反映它？

import { Component,OnInit } from "@angular/core";
import { Router } from "@angular/router";

import { DataService } from "./data.service";
import { Data } from "../../models/data.model";

@Component({
selector: "ei-data-list",template: require("./data-list.component.html")
})
export class DataListComponent implements OnInit {
    constructor(private dataService: DataService,private router: Router) {}

    // .... code for properties and getting data here

    changeRoute(data: Data) {
        this.dataService.data = data;
        this.router.navigate(["/data-list/data-item"]);
    }
}

这是我们构建的数据服务.在这个例子中,我们将它修剪了一下.

import { Injectable } from "@angular/core";
import { Data } from "../../models/data.model";

@Injectable()
export class DataService {
    constructor() { }

    public data: Data;
}

最后,我们有第二个组件,我们传递数据.在ngOnInit中,我们正在收集数据,以便在页面加载时准备就绪.我希望这有帮助.

import { Component } from "@angular/core";
import { DataService } from "./data.service";

@Component({
    selector: "ei-data-item",template: require("./data.component.html")
})
export class DataComponent {
    constructor(private dataService: DataService) {}
    data: Data;

    ngOnInit() {
        this.data = this.dataService.data;
    }
}

以下是我处理CRUD操作的方案.

目标：

>使用RESTful API(带Observables)
>来自子/兄弟/父组件的问题(API？)调用
>一旦发生更改,父/兄弟/子组件会自动更新

这是组件树的视觉效果：

----------------
                             | Component A  |
                             | Vehicle View |
                             ----------------
                                /      \
                               /        \
                ----------------      ----------------
                | Component B  |      | Component C  |
                | Vehicle List |      | Vehicle Menu |
                |  REST: GET   |      |              |
                ----------------      ----------------
                /                         /       \
               /                         /         \
-------------------    ------------------------ -------------------
|   Component D   |    |      Component E     | |   Component F   |
| Add New Vehicle |    | Update Vehicle Name  | |  Delete Vehicle |
|    REST: POST   |    |        REST: PUT     | |   REST: DELETE  |
-------------------    ------------------------ -------------------

组件A.

>只是封装所有其他组件

组件B.

>显示车辆清单(REST API：GET)

更新：当选择车辆时,组件C – > [E,F]

组件D.

>创建一个新的车辆对象/模型(REST API：POST)

更新：组件B(然后触发组件B更新)

组件C.

>显示所选车辆菜单(车辆名称,删除所选车辆)

更新：组件E,F

组件E.

>显示/编辑所选车辆名称(REST API：PUT)

更新：组件B.

组件F.

>删除所选车辆(REST API：DELETE)

更新：组件B(在一定程度上更新)组件C,因为没有更多选定的车辆

我已经看过/阅读/观看了Observables / Service / Components / Models上的教程,但它们都是简单的父/子或单个组件示例.
我所追求的是如何通过不同的分支和兄弟叶子传递数据.如何从树的一端触发组件叶片在完全独立的组件分支/叶子上触发更新.

我要么：

>一个已经存在的教程(我已经错过了),它涵盖了上述类似场景中的所有CRUD操作
>有人愿意为上述场景中的所有CRUD操作创建的plunker
>关于如何实现上述目标的理论(虽然,我想说我理解它背后的理论,但我在实践中遇到了麻烦)

可观察者不参与可与之沟通的内容.这就是Angular DI和服务的用途.您可以使用服务与一组特定组件共享可观察对象.

Angular创建了一个类似于组件和指令树的注入器层次结构.每个注入器都有一组提供者(使用提供者在组件中注册的服务：[…]组件或指令装饰器(或引导程序(AppComponent,[…],它是根组件注入器的父级) ).

DI为每个提供者维护一个服务(或其他可注入)的单个实例.如果组件依赖于服务,DI将开始在需要它的组件中查找提供程序.如果它找不到它,它继续搜索父注射器,直到它找到一个或直到它到达根注射器.

这允许您指定服务的范围.如果您在bootstrap()或根组件中提供它,则此服务的范围是整个应用程序.如果您在另一个组件上提供它,则范围是此组件及其子组件.

如果要在特定组件之间进行通信,则在公共父级提供共享服务,并将其(将其添加到构造函数参数列表中)注入到应该相互通信的组件中.
您可以看到这样的共享服务作为服务总线.

事件的使用者订阅此共享服务中可用的可观察对象,发件人使用observable向订阅者发送数据.

@Injectable() 
class VehicleService {
  verhicles = new Subject();

  createVehicle(newVehicle) {
    return http.post(...)... // persist new vehicle
    this.vehicles.emit(newVehicle);
  } 

  updateVehicle(modifiedVehicle) {
    return http.post(...)... // persist modified vehicle
    this.vehicles.emit(modifiedVehicle);
  }

  ...
}

@Component({
  selector: 'my-app',providers: [VehicleService],// provide globally
...})
export class AppComponent {}

@Component({
  selector: 'b-cmp',...})
export class ComponentB {
  constructor(private vehicleService:VehicleService) {
    vehicleService.vehicles.subscribe(data => {
      // do something with new data
    });
  }
}

@Component({
  selector: 'd-cmp',...})
export class ComponentD {
  constructor(private vehicleService:VehicleService) {}

  persisteNew(vehicle) {
    this.vehicleService.createVehicle(vehicle);
  }
}

@Component({
  selector: 'c-cmp',...})
export class ComponentC {
  constructor(private vehicleService:VehicleService) {}

  saveVehicle(vehicle) {
    this.vehicleService.updateVehicle(vehicle);
  }
}

这只是展示了非常基础,但完整的功能将是一个广泛的SO答案.

https://github.com/ngrx/store可能对您的用例很有用,这使得集中管理所有更新变得更加容易.

{path: 'signup',component: SignupComponent}

但是,如果我运行此代码,我会收到一个错误：

Error: Uncaught (in promise): Error: Cannot match any routes: ''

所以我决定在”路径上使用一个空组件,它的工作原理与我想要的完全一样.

路由文件：

import {Routes,RouterModule} from '@angular/router';
import {SignupComponent} from "./signup/signup.component";
import {EmptyComponent} from "./empty/empty.component";

const appRoutes:Routes = [
    {path: '',component: EmptyComponent},{path: 'signup',component: SignupComponent}
];

export const appRoutingProviders = [];

export const routing = RouterModule.forRoot(appRoutes);

带路由器插座的文件：

<header>
    <div>
        <buttonrouterLink="/signup">Sign Up</button>
        <button>Sign In</button>
    </div>
    <i>keyboard_arrow_down</i>
    <router-outlet></router-outlet>
    <div*ngIf="overlay" (click)="close()"></div>
    <div></div>
</header>

我只想要路由器只在“注册”路径上路由SignupComponent.还有另一种方法可以做到这一点,并消除使用空组件？如果这个问题写得不好,我很抱歉,我对StackOverflow很新.

const appRoutes:Routes = [
    {path: '',redirectTo: 'signup',pathMatch: 'full'},component: SignupComponent}
];

或者,如果您希望路由器插座为空,直到您导航到注册,请将四个完全留空：

const appRoutes:Routes = [
    {path: '',children: []},component: SignupComponent}
];

FileName：app.component.html

<ques [card_title]="'Abc'" [card_text]="'What is Space'" [items]="{{items}}"></ques>

<ques [card_title]="'Xyz'" [card_text]="'What is Time'" [items]="{{items}}"></ques>

“问题选择器来自具有项目数组的外部组件”.
我目前在app模块中,我已经导入了ques组件,现在我需要将一个数组传递给问题！

目前有效的是

FileName：app.component.html

<ques [card_title]="'Abc'" [card_text]="'What is Space'" [items]="['google','stack','overflow']"></ques>

任何人都知道如何实现这一目标？
我是新手,欢迎所有建议和不同方法.谢谢！

<ques [card_title]="'Xyz'" [card_text]="'What is Time'" 
                  [items] = "{{items}}"

应该是这样的

//items array in you ts file 
items:string[] = ['google','overflow']";

//template 
<ques [card_title]="'Xyz'" [card_text]="'What is Time'" 
                  [items] = "items"

不需要{{items}}因为你已经有[]用于从ts文件变量输入值

在搜索页面中,用户可以单击其中一个结果上的按钮,该结果调用导致此行触发的方法. this.router.navigate([‘profile-detail’,selection]);

选择对象在导航之前就像这样.

{
  profile: {
    id: number,fname: string,lname: string
  },contact: {
    type: string,address: string
  },books: [{
    title: string,author: string
  }]
}

但是,当我们到达profile-detail页面时,this.route.snapshot.params将此作为实际数据：

{
  profile: "[object Object]",contact: "[object Object]",books: "[object Object]"
}

您可以使用共享服务在不是父/子或兄弟节点的组件之间传递对象,也可以像路由器那样动态添加对象.

另见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

根据您的具体要求https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard,解析器也可能有效

 1 function test(){
 2     var url = "/api/demoController/add";
 3     var params = {
 4         "faceInfoList": [{
 5             "faceId": "1",
 6             "faceName": "leftFace"
 7         }, {
 8             "faceId": "2",
 9             "faceName": "rightFace"
10         }],
11         "personId": "123"
12     }
13     $.ajax({
14         url:"/api/demoController/add",
15         data:params,
16         type:"post",
17         dataType:"json",
18         async:true,
19         success:function(res){
20             if(res.success || res.code == 200){
21                 console.log(res);
22             }else{
23                 console.log(res);
24             }
25         },
26         error:function(res){
27             console.log(res);
28         },
29     });
30 }

 1 function test(){
 2     var url = "/api/demoController/add";
 3     var params = {
 4         "faceInfoList": [{
 5             "faceId": "1",
 6             "faceName": "leftFace"
 7         }, {
 8             "faceId": "2",
 9             "faceName": "rightFace"
10         }],
11         "personId": "123"
12     }
13     $.ajax({
14         url:"/api/demoController/add",
15         data:JSON.stringify(params),
16         type:"post",
17         dataType:"json",
18         contentType: "application/json;charset=UTF-8",
19         async:true,
20         success:function(res){
21             if(res.success || res.code == 200){
22                 console.log(res);
23             }else{
24                 console.log(res);
25             }
26         },
27         error:function(res){
28             console.log(res);
29         },
30     });
31 }

1 @RequestMapping(value = "/add", method = {RequestMethod.POST}, consumes = MediaType.APPLICATION_JSON_VALUE)
2 @ResponseBody
3 public String add(@RequestBody InfoReq vo) throws IOException {
4     System.out.println(vo.toString());
5     return "Success";
6 }

http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview

onSelect(crisis: Crisis) {
    // Navigate with Absolute link
    //this.router.navigate(['/crisis-center',1]); //this is working.
     this.router.navigate(['/crisis-center',{ id: '1',id2:'2'}]); //this is not working
    }

//下面是路线：

//{ path: 'crisis-center/:id',component: CrisisDetailComponent } //-- this is working
  { path: 'crisis-center/:id /:id2',component: CrisisDetailComponent},// this is not working

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        let id = +params['id'];
        let id2 = +params['id2']; //Unable to read id and id2 values
        this.service.getCrisis(id)
          .then(crisis => {
            if (crisis) {
              this.editName = crisis.name;
              this.crisis = crisis;
            } else { // id not found
              this.gotoCrises();
            }
          });
      });
  }

我有三个分层导航,它从危机中心转移到危机细节,然后从危机细节转移到> transactiondetail.因此,在我导航到危机细节之后,我想通过危机等待和危机等待,以便遍历细节,然后再回到危机清单.

我试图传递多个参数在这里有人有这个问题？

此外,我想隐藏浏览器URL中的URL参数并显示别名,以前用作“as”关键字现在它不起作用.

任何帮助赞赏

this.router.navigate(['/crisis-center',1,2]);

你试图这样做：

this.router.navigate(['/crisis-center',id2:'2'}]); //this is not working

因为您已将对象作为第二个参数传递,所以您传递的是查询参数而不是路由器参数.所以,它的URL是：

localhost:3000/crisis-center;id=1&id2=2

你可以在这里阅读更多相关信息：https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

>我的模块是延迟加载的(但到目前为止基本的“loadChildren”方法没问题)
>正在加载模块本身(在dev-tools的网络选项卡中可以看到)

我的问题：

请参阅下面的路由代码.第一个版本正常工作.找到路由,并且在创建routerLink时不会抛出任何错误.

但是,为什么我的第一个摘录工作,第二个不？我不想创建一个伪路径“测试”只是为了让这个工作.第二个例子是获取此错误消息.

[…]Cannot match any routes. URL Segment: ‘mypath'[…]

工作路线：

children: export const routes: Routes = [
    {
        path: '',component: ParentSplitViewComponent,children: [
            {
                path: '',redirectTo: 'test'
            },{
                path: 'test',component: SplitViewComponent,children: [
                    {
                        path: '',redirectTo: 'list'
                    },{
                        path: 'list',component: MyListComponent,outlet: 'left'
                    },{
                        path: ':id',component: MyDetailComponent,outlet: 'right'
                    }
                ]
            }
        ]
    }
];

不工作路由：

children: export const routes: Routes = [
    {
        path: '',outlet: 'right'
                    }
                ]
            }
        ]
    }
];

请不要依赖于文件的命名等.我必须重命名路径等 – 从这个角度来看一切正常.它只是关于路由.

App.routing.ts

{
    path: 'mypath',loadChildren: 'app/modules/myModule/my.module#MyModule'
},

更大的延迟加载模块摘要,以了解结构：

import [...]    


@Component({
    selector: 'parent-split-view-layout-container',template: `
    <h1>Parent</h1>

    <router-outlet></router-outlet>
  `
});
export class ParentSplitViewComponent {}



@Component({
    selector: 'split-view-layout-container',template: `
    <h1>Vertical Split View</h1>

    <div id="left">
        <router-outlet name="left"></router-outlet>
    </div>

    <div id="right">
        <router-outlet name="right"></router-outlet>
    </div>
  `
});
export class SplitViewComponent {}




/* Routing DeFinition */
export const routes: Routes = [
    {
        path: '',outlet: 'right'
                    }
                ]
            }
        ]
    }
];

export const MyRouting: ModuleWithProviders = RouterModule.forChild(routes);

Angular2版本：

"@angular/common": "~2.4.5","@angular/compiler": "~2.4.5","@angular/core": "~2.4.5","@angular/forms": "~2.4.5","@angular/http": "~2.4.5","@angular/material": "^2.0.0-beta.1","@angular/platform-browser": "~2.4.5","@angular/platform-browser-dynamic": "~2.4.5","@angular/router": "~3.4.5",

我也需要这个,但是自2016年8月26日问题开始以及“vsavkin于2016年11月16日取消了他们的任务”之后,我认为我们很快就会看到修复.

我最终得到了一些非常糟糕的东西,而不是我用辅助路线做的事情,但工作必须跟上.我希望我能够帮助那个,但我不是……

编辑：(13/06/18)
看起来fix今天已经合并了！