当测试需要一个实例时Router,只提供Router自己是不够的:

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

import {it, inject, beforeEachProviders} from '@angular/core/testing';
import {ComponentToTest} from './component.to.test';

describe('ComponentToTest', () => {
  beforeEachProviders(() => [
    Router,    
    ComponentToTest
  ]);


  it('should call getData() on contruct', inject([Router], (router) => {
    spyOn(ComponentToTest.prototype, 'getData');
    expect(ComponentToTest.prototype.getData).not.toHaveBeenCalled();
    let component = new ComponentToTest(router);
    expect(ComponentToTest.prototype.getData).toHaveBeenCalled();
  }));
});

将发生以下错误:

错误:无法解析"路由器"的所有参数(？,？,？,？,？,？).确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"Router"使用Injectable进行修饰.

但我真的不知道如何解决路由器.

Router 参数

_rootComponent:Object,

_rootComponentType:Type,

在alpha中我们有RootRouter: import {RootRouter} from 'angular2/src/router/router';.这已经消失,没有任何替代品.

_componentResolver:ComponentResolver,

_urlSerializer:RouterUrlSerializer,

还没有得到如何提供这些的线索.

_routerOutletMap:RouterOutletMap,

似乎这个已经在路由器本身中提供了

_location:位置

此参数可能仍由以下提供SpyLocation:

import {SpyLocation} from '@angular/common/testing';

describe('ComponentToTest', () => …

我想使用页面上的select元素创建导航.在锚标记上使用RouterLink指令很简单,但选择下拉列表是否相同？或者,当我的选择发生变化时,我是否需要在我的组件上创建自己的导航方法？

<a [routerLink]="[location]">Location</a>

<select (change)="navigate($event.target.value)">
    <option>--Select Option--</option>
    <option [value]="[location]">Location</option>
</select>

我正在寻找这样的东西:

<select>
    <option>--Select Option--</option>
    <option [routerLink]="[location]">Location</option>
</select>

我正在使用RC5的NgModule来进行动态路由加载.

我的应用程序有两个深度级别.我有以下路线:

• 应用程序/登录
• 应用程序/仪表板/模块1
• 应用程序/仪表板/模块2
• 等等...

每个deph级别都有自己的路由器插座,所以我可以在每个级别定义自定义布局.即登录和仪表板显示在app router-outlet中,而module1和module2显示在仪表板router-outlet中.

根据需要动态加载每个路由的配置是什么？

我是第一次使用Angular 2应用程序.

我的路由类似于此 -

/home
/projects/
/projects/:id/members
/projects/:id/members/:id/tasks

从我在互联网上找到的所有参考资料,教程和文章.我只找到类似于此的方法 -

[
  {
    path: "home", component: HomeComponent
  },
  {
    path: "", redirectTo: "home", pathMatch: "full"
  },
  {
    path: 'projects', 
    component: ProjectComponent,
    children: [
      {
        path: ':id', 
        component: ProjectDetailsComponent,
        children: [
          { 
            path: 'members', 
            component: MemberComponent, 
            children : [
              {
                path: ':id',
                component : MemberDetailsComponent,
                children : [
                  {
                    path: 'tasks',
                    component : TasksComponent
                  }
                ]
              }
            ] 
          },
        ]
      }
    ]
  }
]

这很好用.但是,我觉得,这是一种严格类型的方法,可以在有很多组件的情况下创建.

我创建了名为ProjectModule,MemberModule,TaskModule的功能模块.ProjectModule下还会有更多模块.

在这种情况下,嵌套路线的最佳方法是什么？延迟加载类型的工作,但url看起来像,http://localhost/members/而不是http://localhost/projects/12/members即使成员在loadChildren …

我有一个应用程序,在某些情况下我在父路由的子路由之间路由.一个看起来像example.com/a/1/另一个example.com/a/2/将切换1到2触发页面的重新加载/渲染a？

就像播放视频a并将路径出口作为该视频的兄弟一样,此页面更改是否会触发视频重新加载？

如果是这样,可以预防吗？

您好，我在Angular的自定义异常处理程序中添加了路由导航，但是我遇到的问题是，当在Angular组件的onInit上触发错误时，它会进入错误循环：

错误：无法激活已经激活的插座

这是我的组件的代码：

    import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Injectable()
export class ErrorService implements ErrorHandler  {

  constructor(
    private injector: Injector
  ) { }

  get router(): Router {
    return this.injector.get(Router);
  };


  handleError(error: any): void {
    console.error(error);
    this.router.navigate(['error', { error: error }], { skipLocationChange: true});
  }

}

这些是我的路线：

export const routes: Routes = [
  { path: '', redirectTo: 'browser', pathMatch: 'full' },
  { path: 'browser', loadChildren: './modules/browserui#BrowserUiModule' },
  { path: 'error', component: ErrorComponent, …

我在Angular项目的路线中遇到一些问题，主要是子路线的第三级。在应用程序上浏览时，路线可以正常运行。（routerLink），并且在通过浏览器URL访问URL时出现问题。

我的Angular版本是2.4.0，
我正在使用进行测试ng serve。

对于具有给定结构的项目，

.
??? photos
??? posts
??? users
?   ??? detail
?   ?   ??? address
?   ?   ??? family
?   ?   ??? information
?   ?   ??? phones
?   ??? friends
?   ??? profile
??? videos

以下是代码，

// user routes
export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [ …

<router-outlet></router-outlet>导航到“ / child”路由时，我的应用程序的根目录将在子模块中显示以下组件：

child.component.ts

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

@Component({
  template: `
    <div style="display:flex; width: 100%; height: 100%;">
      <custom-sidebar-component></custom-sidebar-component>
      <router-outlet></router-outlet>
    </div>`
})
export class ChildComponent {
}

现在，此组件可以正常显示，并可以按预期填充整个屏幕。但是，当我尝试导航到该模块的子路径时，例如说“ / child / home”，我希望以下HTML显示在<router-outlet></router-outlet>上面的组件模板中看到的子路径中。

child-home.component.html

<style>
  .parent-style {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
  }

  .box-style {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: red;
    color: white;
    border: 1px solid black;
  }
</style>
<div class="parent-style">
  <div class="box-style">Box 1</div>
  <div class="box-style">Box 2</div>
</div>

但是这次，路由器出口的内容没有按我希望的那样填充可用空间。我能够看到我想要的结果的唯一方法是打开开发工具并编辑包装组件的Angular生成的_nghost属性。如何获得我的组件以填充可用空间？

这是我的期望

这就是我真正得到的

我已经检查了堆栈上的流程答案,但是它们似乎都没有相关性,我创建了两个组件page1和page2.并在module.ts中声明了一条路线

     import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Route, RouterModule} from '@angular/router'


import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';


@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path:'page1', component:Page1Component},
      {path:'page2', component:Page2Component}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的page1 html如下所示

<p>
  page1 works!

<button (click)= 'OnbtnClick()'>Route to Page2</button>
</p>

组件ts如下

import { Component, OnInit …

我已经编写了一个有角的4.3.0打字稿库。在构建库时，我在* .d.ts文件中看到以下错误。

[加载程序]中的错误.. \ myLibrary \ lib-commonjs \ my-guard.service.d.ts：13：5 TS2416：类型“ MyGuard”中的属性“ canActivate”无法分配给基本类型中的相同属性'CanActivate'。键入'（下一个：ActivatedRouteSnapshot，状态：RouterStateSnapshot）=>布尔值| 承诺| 观察...'不可分配给类型'（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）=>布尔值| 可观察 Pr ...'。输入'boolean | 承诺| “可观察”不能分配给“布尔值| 可观察 诺言'。类型“可观察”不能分配给类型“布尔| 可观察 诺言'。类型“可观察”不能分配给类型“承诺”。属性“ [Symbol.toStringTag]”

这就是我的后卫的样子

  @Injectable()
    export class MyGuard implements CanActivate {
         canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot):  Observable<boolean> | Promise<boolean> | boolean  {
return true;
        }
    }

我从canActivate删除了返回类型（Observable | Promise | boolean）后，错误消失了。我想了解为什么我需要删除它才能使其正常工作。

 canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot)  {
    }

错误