标签: angular2-routing

我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？

现在我这样做:

<a [routerLink]="['/Profile/Feed', {username: username}]"
   [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
   Feed for {{username}}
</a>

在我的组件内:

getLinkStyle(path:string):boolean {
  console.log(this._location.path()); // logs: '/profile/john_doe/feed'
  return this._location.path() === path;
}

这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？

我使用带有角度2的业力的单元测试.我在我的服务中添加了路由器,但是当我为此编写测试用例时,它通过我跟随错误.

 Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?).

这是代码

spec.ts

import 'rxjs/add/operator/map';
import { Http, BaseRequestOptions, Response, ResponseOptions,ConnectionBackend } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { GlobalUtils } from './global.utils';
import {  Router} from '@angular/router';

import { TestBed, inject } from '@angular/core/testing';



describe('Global Utils : Meta urls API', () => {
  let emptyMetaUrl = {};

  let metaUrl = {
    LOGIN: '/operator/login',
    META_API: '/meta-api'
  };

  beforeEach(()=>TestBed.configureTestingModule({

    providers: [
      Router, …

我正在使用Angular 2.1.2.

我有一个身份验证令牌(使用angular2-jwt),如果它到期,我的webApi调用失败,出现401错误.我正在寻找一个解决方案,用户不会丢失任何输入数据.

我可以抓住这个401并用登录打开一个模态.然后用户登录,模态消失,他们看到他们的输入屏幕.但是,失败的请求显示错误,因此我需要重新处理请求.如果是路由器导航,则初始数据未加载.

我可以重新加载页面,但如果我router.navigate到同一页面,它似乎并没有真正重新加载页面.我不想在单页面应用上进行整页重新加载.有没有办法强制router.navigate运行,即使它是当前页面？

重新导航仍然是一个问题,因为我会丢失任何未保存的新输入数据.

理想情况下,请求只是"暂停",直到用户从模态登录.我还没有找到实现这个的方法.

有任何想法吗？有最好的做法吗？

使用的利弊是什么:

1. PathLocationStrategy - 默认的"HTML 5 pushState"样式.
2. HashLocationStrategy - "哈希URL"样式.

例如,使用HashLocationStrategy将阻止通过其#ID滚动到元素的功能,但是某些第三方插件需要HashLocationStrategy或Hashbang #!为了在ajax网站上工作.

我想知道哪一个为webapp提供更多.

我正在尝试了解创建路由的方式,其中包含URL参数中的一些信息.

这是我的路线(app.routes.ts):

{path: 'results/:id', component: MyResultsComponent},

这是我导航到路线的方式:

goToResultsPage(query: string) {
this.router.navigate(['results', query], { queryParams: { pageSize: 20 } });}

如您所见,我还有一个查询参数.我想知道,在我的网站中检索这个的最好和最干净的方法是什么MyResultsComponent.现在我有一种嵌套subscribe结构:

ngOnInit() {
    this.route
      .params
      .subscribe(params => {
        this.query = params['id'];
        this.route
          .queryParams
          .subscribe(queryParams => {
            this.offset = queryParams['pageSize'];
            #find entries this.entryService.findEntries(this.query, this.pageSize);
      });
    });
  }

之后,我想将此参数传递给my EntryService,后者返回找到的条目.

我正在尝试将ActivatedRoute组件注入到我的组件中以访问我正在编辑的对象的ID(或者找出,没有ID参数,创建了新对象).

我只为组件创建了模板,当我加载起始页面时(不是带有我想要使用的组件的页面的事件),我收到以下错误:

错误:(SystemJS)无法解析ActivatedRoute的所有参数:(？,？,？,？,？,？,？,？).

这是我的代码:

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute} from "@angular/router";

@Component({
    selector: 'my-edit',
    templateUrl: './templates/my-edit.htm',
    providers: [ActivatedRoute]
})

export class MyEditComponent implements OnInit {

    constructor(private route : ActivatedRoute){
        console.log(route.params)
    }

    ngOnInit() : void {
    }

}

它基于来自AngularJS网站(英雄)的示例中的代码,我真的不知道这里的问题...我不能将ActivatedRoute导入Component,或者我需要一些额外的东西才能导入它？

我的路由配置是:

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

routes路径集合在哪里,就像在角度示例中一样,并AppRoutingModule在app.module中导入.

canActivate在Angular2中配置路由时有没有办法设置"基础" ？因此,所有路由都由相同的基本检查覆盖,然后每个路由可以进行更细化的检查.

我有这样的AppModule路由:

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                component: HomeComponent,
                canActivate: [AuthenticationGuardService],
                data: { roles: [Roles.User] }
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

对于功能模块FeatureModule:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "feature",
                component: FeatureComponent,

                // I'd like to avoid having to do this:
                canActivate: [AuthenticationGuardService],
                data: { roles: [Roles.User] }
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class FeatureRoutingModule { }

我AuthenticationGuardService通过使用中提供的角色检查用户是否可以访问路由data …

当使用CSS routerLink并将routerLinkActiveCSS应用于导航栏时,我还想包含这些fragment信息,以便链接对于主页中的部分是唯一的.

我已经尝试过[routerLinkActiveOptions]="{ exact: true }"运气了.

导航条形码的相关部分是:

  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
  </li>

上述代码访问的三个不同的URL是:

• /sitio#inicio
• /sitio#invierte
• /sitio#contacto

但是当点击其中任何一个时,所有这些都被标记为活动(因为它们对应于routerLink="/sitio"并且fragment=*信息不包括在检查中.这导致导航栏在单击其中任何一个时看起来像这样:

关于如何做到这一点的任何想法？

我是Angular 4/Angular 2的初学者.我正在构建一个包含的应用程序

1)静态html文件(aboutus.html,pricing.html,联系us.html等),带有相应的css,js文件2)具有复杂功能的单页应用程序

第一部分#1根本不需要Angular,因为它完全是静态的.登录后,用户进入#2.从我经历的Angular教程中,似乎我需要将#1和#2组合在一起,仍然需要创建#1中的组件等,我觉得这是不必要的.

有没有办法,我可以构建这个项目,以便我可以按原样使用静态HTML,并仅将Angular用于动态单页面应用程序？任何有用的链接或示例将非常感谢.

我想有两个顶级路径用于登录和注册.

我宁愿没有做auth/log-in和auth/register.

但是,auth组件位于一个单独的模块中,这很好,因为除非特别要求,否则不应加载它.

export const routes: Route[] = [
  { path: 'log-in',   loadChildren: './auth-module/auth.module#AuthModule'},
  { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];

我如何指定何时定义我希望log-in路径转到延迟加载的AuthModule 内部路径的log-in路径,以及转到延迟加载模块内部路径的路径？registerregister