标签: angular2-routing

如何使用karma和jasmine对Angular 2.0.0版中的路由器进行单元测试？

这是我的旧单元测试在版本2.0.0-beta.14中的样子

import {
  it,
  inject,
  injectAsync,
  beforeEach,
  beforeEachProviders,
  TestComponentBuilder
} from 'angular2/testing';

import { RootRouter } from 'angular2/src/router/router';
import { Location, RouteParams, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT } from 'angular2/router';
import { SpyLocation } from 'angular2/src/mock/location_mock';
import { provide } from 'angular2/core';

import { App } from './app';

describe('Router', () => {

  let location, router;

  beforeEachProviders(() => [
    RouteRegistry,
    provide(Location, {useClass: SpyLocation}),
    provide(Router, {useClass: RootRouter}),
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: App})
  ]);

  beforeEach(inject([Router, Location], (_router, _location) => {
    router = _router;
    location = …

如何处理/提供@Input,并@Output在角2动态创建组件的属性？

这个想法是在调用createSub方法时动态创建(在这种情况下)SubComponent.分叉很好,但我如何为SubComponent中的属性提供数据.另外,如何处理/订阅SubComponent提供的事件？@Input@Output

例如: (两个部件在相同的NgModule)

AppComponent

@Component({
  selector: 'app-root'
})  
export class AppComponent {

  someData: 'asdfasf'

  constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }

  createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

  onClick() {
    // do something
  }
}

子

@Component({
  selector: 'app-sub'
})
export class SubComponent {
  @Input('data') someData: string;
  @Output('onClick') onClick = new EventEmitter();
}

我的模块.ts,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Router }   from '@angular/router';
import { AppComponent }  from './crud/app.component';
import { Profile }  from './profile/profile';
import { Mainapp }  from './demo.app';
import { Navbar }  from './header/header';
// import {ToasterModule, ToasterService} from 'angular2-toaster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports:      [ BrowserModule,FormsModule, ReactiveFormsModule ,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent},
      { path: 'profile', component:Profile}
    ]) ],
  declarations: [ AppComponent,Mainapp,Navbar,Profile …

我的方案如下.我有一个菜单,有多个选项.应该根据用户权限(已经解决)显示每个菜单,大多数菜单项都封装为模块,并且大多数模块都是延迟加载的,因此当用户第一次单击菜单项时,它会加载(到此为止所有内容)效果很好),现在我的要求是,为了提供更好的用户体验,我需要在加载延迟加载的模块时用户点击菜单项后显示活动指示器.

到目前为止,我尝试使用canActive,canLoad,来自Angular Router的canActivateChild接口,但没有运气.

有任何想法吗？

我正在关注Angular 2路由示例.使用"精简"网络服务器我可以从根和深层链接工作导航,但是使用Apache我可以从根导航,但是当跟随链接指向路由时会得到404 Not Found错误.

例如,以下URL对npm由端口3000启动的"lite"Web服务器起作用.

http://localhost:3000/crisis-center/2

但是在端口80上运行Apache的下一个URL失败了.

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

我确实尝试了一些针对类似Angular 1问题推荐的.htaccess解决方案,但没有运气.如果有人在Apache上有Angular 2路由和深层链接工作,请告诉我你是如何实现的.

@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
},

{path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter',  'CrisisDetail', {id:3}]}
])

Boot.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent}     from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我最近更新到新的RC3和Router3alpha,似乎有些事情发生了变化.

我注意到单击活动路径的链接不再导致重新加载组件.如何使用新的router3实现此行为？

我的链接看起来像

<a [routerLink]="['/link1']">Link1</a>

为了测试我只是在ngOnInit中使用了一个随机数:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

在路由之间切换时它可以正常工作,但是单击当前活动的路由不会导致组件的重新加载.

我想使用ActivatedRoute来获取服务中的路由参数,就像我在组件中一样.但是,当我在Service中注入ActivatedRoute对象时,它包含一个空的params变量

我创建了一个再现行为的plunker:http://plnkr.co/edit/sckmDYnpIlZUbqqB3gli

请注意,目的是使用服务中的参数而不是组件,plunker的设置方式纯粹是为了证明问题.

组件(test已检索):

export class Component implements OnInit {
  result: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.result = params['test'];
    });
  }
}

服务(test是未检索):

export class Service {
  result: string;

  constructor(private route: ActivatedRoute) {
    this.getData();
  }

  getData() {
    this.route.params.subscribe(params => {
      this.result = params['test'];
    });
  }
}

是否可以在保留所有其他参数的同时更改当前路径中的单个路径参数？这用于寻呼组件,该寻呼组件将路由到新页面,同时保持当前路由的其他部分相同.

一些例子:

• 第2页的默认页面:orders?foo=foo&bar=bar>orders?foo=foo&bar=bar&page=2
• 默认页面到第2页(孩子):orders/;foo=foo;bar=bar>orders/;foo=foo;bar=bar;page=2
• 有关参数的孩子和父母的第2页到第3页:orders/;foo=foo;page=2?bar=bar>orders/;foo=foo;page=3?bar=bar

我尝试过使用a routerLink,但这会丢失原本不属于路由器链接的任何其他参数.

我也尝试使用当前路径Router来获取Instruction当前路径,但是Instruction在调用时改变参数似乎没有任何影响navigateByInstruction().

除登录页面外,我在每个页面上都有一些我想要的元素.当用户在登录页面上时,我想使用ngIf或可能的元素的隐藏属性来隐藏这些元素.

我试过这个:

<div [hidden]="router.isRouteActive(router.generate('/login'))">

基于这个问题和答案:在Angular 2中,您如何确定活动路线？

并且还试过这个:

 <div *ngIf="!router.isRouteActive(router.generate('/login'))">

但没有取得任何成功.

这里参考的是与此html匹配的组件.

import { Component, OnInit } from 'node_modules/@angular/core';
import { HTTP_PROVIDERS, XHRBackend } from 'node_modules/@angular/http';
import { Routes, Router, ROUTER_DIRECTIVES } from 'node_modules/@angular/router';

import { LoginService } from './login/login.service';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';

@Component({
    selector: 'portal',
    templateUrl: 'portal/portal.component.html',
    directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
    providers: [
        HTTP_PROVIDERS,
        LoginService
    ]
})

@Routes([
    { path: '/login', component: LoginComponent},
    { path: '/user/:username', component: UserComponent}
]) …

我的导航栏有这个代码:

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

问题是HOME导航点始终获取类,因为/似乎始终处于活动状态.用一个小而简单的解决方案可以避免这种情况吗？

谢谢您的帮助

编辑:

这是现在的解决方案:

[routerLinkActiveOptions] ="{exact:true}"