标签: angular2-routing

在Angular 1中,我的配置如下所示:

$routeProvider
  .when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
  }
})

如何在Angular2中使用resolve？

我有看起来像这样的DOM:

<app>
    <router-outlet></router-outlet>
    <project>...</project>
</app>

其中project元件是由路由器插入.

如何向此元素添加类？

我们有什么方法可以从Angular2中的@CanActivate重定向到另一个组件吗？

鉴于这个url结构(我无法控制),如何使用Angular2检索哈希片段？

http://your-redirect-uri#access_token=ACCESS-TOKEN

我的路由器确实路由到正确的组件,但是一切都oauth被废弃后我无法在request.params或location.path中找到哈希片段.注定？

路由器配置:

@RouteConfig([
{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true},
{path: '/landing/oauth', name: 'Landing', component: LandingComponent}  // this one

])

在我的应用程序中,一些URL采用该表单

/department/:dep/employee/:emp/contacts

在我的侧边栏中,我显示了所有员工的列表,每个员工都有一个[routerLink]链接到该员工联系人的员工

<ul>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 1, 'contacts']"></a>
    <li>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 2, 'contacts']"></a>
    <li>
    ...
</ul>

然而,通过这种方法,我总是需要提供完整的路径,包括所有的参数(dep如上例所示),这非常麻烦.有没有办法提供路线的一部分,例如

<a [routerLink]="['employee', 2, 'contacts']"></a>

(没有那个department部分,因为我并不真正关心department那个观点,而我的感觉是,这反对分离了关注点)？

我有以下路由配置.

@RouteConfig([
    {
        path: '/home',
        name: 'Homepage',
        component: HomepageComponent,
        useAsDefault: true
    }
)
export class AppComponent {
}

每当浏览器指向/home此路由时,但不适用于/Home任何其他情况变化.如何在不关心案例的情况下使路由器路由到组件.

谢谢

编辑:显然这已经过时了,现在你providers在NgModule 的数组中提供你的守卫.请查看其他答案或官方文档以获取更多信息.

• 对组件的引导已过时
• provideRouter() 也过时了

我正在尝试使用Angular2指南中的登录名和AuthGuard在我的项目中设置身份验证:https://angular.io/docs/ts/latest/guide/router.html

我正在使用该版本:"@ angular/router":"3.0.0-beta.1".

我会尝试尽可能多地解释,如果您需要更多细节,请随时告诉我.

我有我的main.ts文件,使用以下代码提升应用程序:

bootstrap(MasterComponent, [
    APP_ROUTER_PROVIDERS,
    MenuService
])
.catch(err => console.error(err));

我加载了MasterComponent,它加载了一个包含按钮的Header,允许我浏览我的应用程序,它现在还包含我的主要内容.

我正在按照指南使我的应用程序以相同的方式工作,使用以下app.routes.ts:

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...MasterRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    AUTH_PROVIDERS
];

以及指南中的login.routes.ts,它定义了我的AuthGuard:

export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

我的主组件有自己的路由定义,其中还包含我正在尝试设置的防护.master.routes.ts:

export const MasterRoutes : RouterConfig = [
    { path: '', …

我有一个有两名canActivate守卫的路线(AuthGuard和RoleGuard).first(AuthGuard)检查用户是否已登录,如果没有,则重定向到登录页面.第二个检查用户是否具有允许查看页面的角色定义,如果没有,则重定向到未授权页面.

canActivate: [ AuthGuard, RoleGuard ]
...
export class AuthGuard implements CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        ...
        this.router.navigate(['/login']);
        resolve(false);
}

export class RoleGuard implements CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        ...
        this.router.navigate(['/unauthorized']);
        resolve(false);
}

问题是,当我访问路线并且我没有登录时,我点击了AuthGuard,它失败并告诉路由器导航到/login.然而,即使AuthGuard失败RoleGuard了,然后运行然后导航到/unauthorized.

在我看来,如果第一个失败,那么运行下一个后卫是毫无意义的.有没有办法强制执行此行为？

当我提供params到我TestComponent的测试床时,如果html包含一个[routerLink]

试验台设置

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 …

如何使用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 = …