当我向我的TestComponent
提供参数时,如果html包含[routerLink]
testbed setup
TestBed.configureTestingModule({
imports: [SharedModule.forRoot(), ManagementModule, HttpModule, RouterModule.forRoot([{
path: '', component: TestComponent
}])],
declarations: [TestComponent],
providers: [
BaseRequestOptions,
MockBackend,
{
provide: Http, useFactory: function (backend: MockBackend, defaultOptions: BaseRequestOptions) {
return new Http(backend, defaultOptions);
},
deps: [MockBackend, BaseRequestOptions]
},
{ provide: APP_BASE_HREF, useValue: '/' },
{
provide: ActivatedRoute,
useValue: {
params: Observable.of({ versionId: '1' }),
parent: {
params: Observable.of({ uniqueId: '1234' })
}
}
}
]
});
TestBed.compileComponents();
});
记录错误
Failed: Error in ./DetailComponent class DetailComponent - inline template:72:20 caused by: Cannot read property '_lastPathIndex' of undefined
TypeError: Cannot read property '_lastPathIndex' of undefined
at findStartingPosition (webpack:///home/developer/Projects/project/~/@angular/router/src/create_url_tree.js:184:0 <- src/test.ts:100429:23)
at createUrlTree (webpack:///home/developer/Projects/project/~/@angular/router/src/create_url_tree.js:27:21 <- src/test.ts:100272:45)
at Router.createUrlTree (webpack:///home/developer/Projects/project/~/@angular/router/src/router.js:424:0 <- src/test.ts:28688:111)
at RouterLinkWithHref.get [as urlTree] (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:253:0 <- src/test.ts:50778:32)
at RouterLinkWithHref.updateTargetUrlAndHref (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:246:0 <- src/test.ts:50771:91)
at RouterLinkWithHref.ngOnChanges (webpack:///home/developer/Projects/project/~/@angular/router/src/directives/router_link.js:217:67 <- src/test.ts:50742:74)
at Wrapper_RouterLinkWithHref.ngDoCheck (/RouterModule/RouterLinkWithHref/wrapper.ngfactory.js:101:18)
at DebugAppView.View_DetailComponent3.detectChangesInternal (/ManagementModule/DetailComponent/component.ngfactory.js:548:33)
at DebugAppView.AppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:95635:14)
at DebugAppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:95830:44)
at ViewContainer.detectChangesInNestedViews (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view_container.js:67:0 <- src/test.ts:95967:37)
at DebugAppView.View_DetailComponent0.detectChangesInternal (/ManagementModule/DetailComponent/component.ngfactory.js:85:14)
at DebugAppView.AppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:425:0 <- src/test.ts:95635:14)
at DebugAppView.detectChanges (webpack:///home/developer/Projects/project/~/@angular/core/src/linker/view.js:620:0 <- src/test.ts:95830:44)
模板第72行
<a class="button" [routerLink]="['/']">Back</a>
在一个理想的世界里,我想继续提供参数,任何想法为什么会爆炸?
答案 0 :(得分:22)
我想出了问题/解决方案。
我们看到int
因为Angular路由器在某一点上需要variant_assign
对象上的Cannot read property '_lastPathIndex' of undefined
属性。
Angular source code的相关部分如下所示:
_lastPathIndex
如果snapshot
未定义,它当然会引发我们看到的错误。
问题可以通过使if (route.snapshot._lastPathIndex === -1) {
return new Position(route.snapshot._urlSegment, true, 0);
}
未定义来解决。
我是这样做的。我的代码与OP有点不同。
我有一个名为snapshot
的课程,看起来像这样。
snapshot
以下是我在测试中使用它的方法。
MockActivatedRoute
为了消除错误,我刚刚向export class MockActivatedRoute {
parent: any;
params: any;
constructor(options) {
this.parent = options.parent;
this.params = options.params;
}
}
添加了let mockActivatedRoute = new MockActivatedRoute({
parent: new MockActivatedRoute({
params: Observable.of({ id: '1' })
})
});
属性。
snapshot
答案 1 :(得分:1)
您可以在 providers 数组中添加 snapshot 属性。
providers: [{ provide: ActivatedRoute, useValue: { snapshot: {} } }]
答案 2 :(得分:0)
将快照添加到您的 ActivatedRoute,在参数旁边使用值对象。
HWINEVENTHOOK hWinEventHook = SetWinEventHook(
EVENT_OBJECT_SHOW, EVENT_OBJECT_SHOW,
NULL, WinEventProc, 0, 0, WINEVENT_OUTOFCONTEXT | WINEVENT_SKIPOWNPROCESS
);
答案 3 :(得分:-1)
这没有错误,没有黑客
import {
TestBed,
async
} from '@angular/core/testing';
import {
HttpModule,
BaseRequestOptions,
Http
} from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import {
RouterModule,
ActivatedRoute
} from '@angular/router';
import { MockBackend } from '@angular/http/testing';
import { Observable } from 'rxjs';
import { Component } from '@angular/core';
fdescribe( 'AppComponent', () => {
beforeEach( () => {
TestBed.configureTestingModule( {
imports : [
HttpModule,
RouterModule.forRoot(
[
{
path : '',
component : TestComponent
}
] )
],
declarations : [ TestComponent ],
providers : [
BaseRequestOptions,
MockBackend,
{
provide : Http,
useFactory : function ( backend : MockBackend, defaultOptions : BaseRequestOptions ) {
return new Http( backend, defaultOptions );
},
deps : [ MockBackend, BaseRequestOptions ]
},
{
provide : APP_BASE_HREF,
useValue : '/'
},
{
provide : ActivatedRoute,
useValue : {
params : Observable.of( { versionId : '1' } ),
parent : {
params : Observable.of( { uniqueId : '1234' } )
}
}
}
]
} );
TestBed.compileComponents();
} );
it( 'should create the app', async( () => {
let fixture = TestBed.createComponent( TestComponent );
let app = fixture.debugElement.componentInstance;
expect( app ).toBeTruthy();
} ) );
} );
@Component( {
selector : 'app-root',
template : `
<a class="button" [routerLink]="['/']">Back</a>
<router-outlet></router-outlet>
`,
} )
export class TestComponent {
}