标签: angular2-routing

我正在试验Angular 2并遇到了一个我不确定如何调试的问题.

示例情况

我有一个AppComponent处理所有基本级别路由,并且每个"级别"的路由下来都在该级别的新路由器上声明.

我有以下路线:

• / home,定义于 AppComponent
• /应用程序,定义于 AppComponent
• / applications/new,定义于 ApplicationRouterComponent
• / applications/foo,定义于 ApplicationRouterComponent

作为周围模板的一部分,有一个导航栏对所有页面都是通用的,因此需要能够链接到子路由器中定义的任何路由.[routerLink]嵌套组件不会导致任何错误抛出.

问题

当链接到孙子路由时,看起来View组件甚至不构造.即

<a [routerLink]="['./ApplicationRouter/New']">New Application</a>

将ApplicationRouterComponent被构建并显示,但NewApplication分量却没有.

代码示例

appComponent.ts

import {Component} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS
} from 'angular2/router';
import {ApplicationRouterComponent} from './routes/application/applicationRouter';
import {HomeComponent} from './routes/home/homeComponent';

@Component({
  selector: 'bop-application',
  templateUrl: 'app/index.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/applications/...', name: 'ApplicationRouter', component: …

我的角度站点效果很好，但是当您click进入项目时，它会立即加载页面，有时还会有一段flash时间从API中提取图像，id例如1第二次延迟或页面过渡效果。

但是我不确定如何在Angular 2中实现这一点。有兴趣听听别人在做什么吗？

提前致谢

我正在按照有角度的2路线指南

import { Routes, RouterModule } from '@angular/router';
import { FooComponent }    from './component/foo.component';
const fooRoutes: Routes = [
  { path: 'foopath',  component: FooComponent },
];
export const fooRouting = RouterModule.forChild(fooRoutes);

在visual studio代码中我有以下错误: 任何人都可以告诉我为什么会这样吗？这与官方指南完全相同.我正在使用Angular 2 RC5.

更新后Auth0登录样品使用HashLocationStrategy在app.module.ts:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';
// (...)
@NgModule({
  providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    appRoutingProviders,
    AUTH_PROVIDERS
  ],  
//(...)

Auth0 Lock authenticated事件不再被引发:

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class Auth0Service {

  // Configure Auth0
  lock = new Auth0Lock('I21EAjbbpf...', '....au.auth0.com', {});

  constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult) => { …

我正在将Angular 2.1用于具有多个子模块的大型应用程序,每个子模块定义按功能组织的子应用程序.顶级模块通过导入每个子应用程序的路由等,为整个应用程序配置路由器模块以及所有子路由.因此,从子应用程序的角度来看,它相对于顶层应用程序设置路由的路由,但是子应用程序没有直接明确地知道它的主要路由实际是什么.

其中一些子应用程序具有在另一个子应用程序中更完全定义/控制的实体的摘要面板.从概念上讲,模块的设置如下:

Module 1:
    Imports Module 2
    Routes for Module 1
    Component1A
    App1View (contains Component1A, M2SummaryComponent)

Module 2:
    Routes for Module 2 (one exported as APP2_VIEW_ROUTE, type Route)
    Component2A
    Component2B
    M2SummaryComponent
    App2View (contains Component2A, Component2B)
    ...etc.

我正在寻找一种设计模式,借此可以编写M2SummaryComponent链接到其自己模块中的路径,同时在模块1的App1View中实例化,而无需以某种方式手动硬编码或重新组装路径.

我曾经希望这是一个普遍存在的问题,Angular团队可能会使用类似的东西router.navigate([APP2_VIEW_ROUTE, ...other params]),只需传递你用来配置与所需路径相关的RouterModule的路由对象.看一下源代码,但这似乎不是一个选择.相反,我们有ActivatedRoute的例子.

ActivatedRoute(this.route下面)面临的问题是它将相对于App1View.所以尝试使用router.navigate(['m2SpecialId'],{relativeTo: this.route})是非首发,因为它将相对于让我们进入App1View的路径,而不是回到模块2的首选App2View路径.

就我所知,围绕这些问题的唯一另一个有点优雅的路线(双关语)是使每个子应用程序的模块可以作为ModuleWithProviders导入,以便可选地,可以通知模块的顶级路由适用于其州.然后编写辅助函数,使用其定义的路由汇编特定于该子应用程序的URI.

这感觉很锅炉......就像框架中已经存在解决方案或设计模式一样,因此这个问题.

题:

是否存在使用Angular2路由器的设计模式,该模式允许导入其他模块的组件干净地引用其自己模块的预配置路由,同时保持灵活的顶级路由定义？

我有一个组件,当用户登录它时,路由到一个名为的网址/dashboard我正在努力弄清楚为什么我会收到以下错误.

cannot read property 'args' of undefined

我一直在关注路由器测试的官方文档https://angular.io/docs/ts/latest/guide/testing.html#!#routed-component, 但它似乎没有帮助.我的一半问题是我不太了解文档中的所有代码.这是我对路线的单元测试

 beforeEach(async(()=>{

      class AuthStub{
        private loggedin: boolean = false;
            login(){
              return this.loggedin = true;

            }
      };

      class RouterStub{
        navigateByUrl(url:string){return url;}
      }

    TestBed.configureTestingModule({
      declarations: [ HomePageContentComponent ],
      providers:[
        {provide: Auth, useClass:AuthStub},
        {provide: Router, useClass: RouterStub}
        ]
    })
    .compileComponents()
  }));

  beforeEach(()=>{

      fixture = TestBed.createComponent(HomePageContentComponent);
      comp = fixture.componentInstance;

      de = fixture.debugElement.query(By.css('.loginbtn'));
      el = de.nativeElement;
      fixture.detectChanges();

    });

    it('Should log in and navigate to dashboard', inject([Router],(router:Router)=>{

      const spy = spyOn(router, 'navigateByUrl');

      el.click();

      const navArgs …

我想有一个服务,它有一个可观察的变量依赖于当前URL.

:programID                  --  program overivew
:programID/bug              --  bug list
:programID/bug/:bugID       --  bug overview

哪里programID可以随时切换.我已经提供了一项服务,根据我从棱角分明的文档中的理解,我应该使用参数进行观察

ProgramService :(摘录)

currentProgramID: number

constructor(
    private router: Router,
    private route: ActivatedRoute,
    private http: Http){

    this.route.params.subscribe((params: Params) => {
        console.log('Parent:', params['programID'])
    })

    this.route.children[0].params.subscribe((params: Params) => {
        console.log('Childern:', params['programID'])
        //  Works if loaded while at url : 'abc123/bug/abc123'
    })

    this.route.params.subscribe((params: Params) => {
        console.log('Hacky?:', this.route.snapshot.params['programID'])
    })
}

需要当前程序参考的组件:(提取)

program: Promise<program>

constructor(
    private programService: ProgramService, ... ){}

ngOnInit() {
    this.program = this.programService.getProgram(/*current program*/)
    ...
} …

假设我想简单地对一个组件进行单元测试,该组件采用从路径的一部分获取的参数.例如,我的组件的ngOnInit看起来像这样:

  ngOnInit() {
    this.route.parent.params.switchMap((params: Params) => this.service.getProject(params['projectId']))
      .subscribe((project: Project) => this.update(project));
  }

我现在该怎么做:1:设置我的测试,以便组件创建工作,所以我可以单元测试其他部分

用回答编辑 - 示例ActivatedRouteStub应该使用也有可观察的params的父进行扩展,我应该使用useClass而不是useValue(忘了改回来):

@Injectable()
export class ActivatedRouteStub {

    // ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    // Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    // ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
        // ActivatedRoute.parent.params
    get parent() {
        return { params: this.subject.asObservable() };
    }
}

2:在我的UnitTest中为projectId提供一个值？

来自angular2文档的示例似乎不适用于switchMap,甚至根本不适用(我从那里使用过ActivatedRouteStub,但到目前为止没有运气 - …

在Angular 2中,如何在URL中包含问号和等号？我尝试了以下两种方式:

在html中:

routerLink="./Example?tour=true"

在TypeScript中:

this.router.navigate(['/Example?tour=true']);

这两个例子都导致: /Example%3Ftour%3Dtrue

如何让我的URL工作并显示我想要的方式？

我在Angular 4中进行路由时需要帮助。我想显示这样的URL。Localhost：4200 / user / 1（如果我单击第一个用户的查看详细信息）。我对如何做到这一点感到困惑。我在下面的代码中已尽力而为，但仍然无法正常工作。

app-routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'user', component: UserComponent, children: [

        { path: 'create-new-user', component: CreateNewUserComponent },
        { path: 'user-list', component: UserListComponent },
        { path: 'user-detail/:id', component: UserDetailComponent },

]},
];


@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule {

}