标签: angular-router

我遇到了使用查询参数路由到路由的问题我有这样的功能

goToLink(link) {
    this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

和这个功能

sortParams(link) {
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = {};
    params.forEach((d) => {
      pair = d.split('=');
      data[`${pair[0]}`] = pair[1];
    });
    return data;
}

好吧所以基本上发生了什么我有一个函数被调用goToLink()并且接受一个url并且传递的url是一个带有查询参数的字符串,如此...

https://website.com/page?id=37&username=jimmy

以上只是一个例子而不是它实际上看起来像它现在是一个带有查询参数的链接字符串所以会发生什么呢？我从字符串中删除params并将它们存储在sortParams()函数中的数据对象中,这样当我传递上面的字符串时在我得到一个看起来像这样的对象

{id: 37, username: 'jimmy'}

现在这就是我传递到queryParams:router.navigate中的部分,

返回对象时,该函数应如下所示

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

所以我成功路由到所需的路线,但查询参数看起来像这样..

/page;queryParams=%5Bobject%20Object%5D

我在这里做错了什么？

任何帮助,将不胜感激!

编辑

如果我只是将功能更改为此

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

我得到了相同的网址 /page;queryParams=%5Bobject%20Object%5D

我想为我的解析器编写一个单元测试,需要ActivatedRouteSnapshot像下面那样接受它的构造函数:

export class MyResolver {
  constructor () {
    // ...
  }

  resolve (private route: ActivatedRouteSnapshot) {
    callFoo(route.params.val);
  }
};

但在我的单元测试中,用模拟数据提供激活路由快照的最佳方法是什么？当我尝试使用我需要的属性创建一个对象时,我收到一个错误,它无法转换为ActivatedRouteSnapshot:

it('should call foo', inject([MyResolver], async (myResolver: MyResolver) => {
  const mockRoute = {
    params: {
      val: '1234'
    };
  };

  sinon.spy(callFoo);
  myResolver.resolve(mockRoute); // This is the line that errors
  expect(callFoo.calledWith('1234')).to.be.true;
}));

错误:

Type '{ params: { val: string; }; }' cannot be converted to type 'ActivatedRouteSnapshot'.

如何提供模拟ActivatedRouteSnapshot传递给我的解析器？

我在使用角度4的路径时遇到了一些问题.您知道,当我尝试将数据从组件传递到另一个组件时navigate('root', data),我刚接收到[object Object],[object Object],[object Object].

零件

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

接口

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

发送方法

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

角度7.2.13

使用浏览器后退按钮导航时，将加载组件的HTML，但未加载组件css / js，并且页面将挂起。

但是，通过链接单击或router.navigateByUrl（）导航或重新加载页面时，加载工作正常。但是使用前进/后退按钮导航时绝对不会。

我没有控制台错误。

它可以在开发服务器上完美运行http://localhost:4200/。仅在生产中会发生此问题。

更新

这是在儿童路线中发生的。

更新2

无法在具有相同路由结构的Stackblitz中复制问题。 https://angular-tpsr5z.stackblitz.io/。

更新3

当它挂起时，将同时显示先前和新的路线html。

像这样挂起后，如果我单击任何触发组件方法或更改组件属性的组件，则组件将立即加载。

更新4

打包杰森

{
  "name": "tuilder-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.13",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.13",
    "@angular/compiler": "^7.2.13",
    "@angular/core": "^7.2.13",
    "@angular/forms": "^7.2.13",
    "@angular/http": "^7.2.13",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.13",
    "@angular/platform-browser-dynamic": "^7.2.13",
    "@angular/router": "^7.2.13",
    "@ecodev/fab-speed-dial": "^3.1.0",
    "@google/markerclustererplus": "^2.1.11",
    "@swimlane/ngx-charts": "^10.1.0",
    "@types/googlemaps": "^3.30.19",
    "@types/lodash": …

在 Angular 11 中，这是有效的：

this.r.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map((event: NavigationEnd) => event.url == ROUTES.APPLICATION))

然而在 Angular 12 中它会产生错误：

“MonoTypeOperatorFunction<Event_2>”类型的参数不可分配给“OperatorFunction<Event_2, NavigationEnd>”类型的参数。
类型“Observable<Event_2>”不可分配给类型“Observable”。
类型“Event_2”不可分配给类型“NavigationEnd”。
“RouterEvent”类型中缺少属性“urlAfterRedirects”，但“NavigationEnd”类型中需要属性“urlAfterRedirects”。ts(2345)

有想法该怎么解决这个吗？

这个问题的答案是添加：

"paths": {
    "rxjs": [
      "node_modules/rxjs"
    ],
    "rxjs/*": [
      "node_modules/rxjs/*"
    ]
}

到tsconfig.json。然而这没有用......

我正在学习Angular而且我想做测试,但是我被困了.我有一个功能:

ngOnInit(): void {
    this.route.paramMap
    .switchMap((params: ParamMap) => 
        this.SomethingService.getSomething(params.get('id')))
        .subscribe(something => {
            this.something = something;
            this.doSomethingElse();
    });
}

哪里

route: ActivatedRoute

我想测试它,但我不知道如何模拟ActivatedRoute

我有一个Angular 5应用程序.

我的app组件中有以下代码.

我想隐藏特定路线的导航栏和顶部栏.

是否有可能获得当前激活的路线app.component.ts？如果是的话,怎么样？

如果不可能,有没有解决方案来解决这个问题(使用警卫或其他什么......)？

还要记住,它应该是被动的.当我切换到另一个路线边栏时,导航栏应该再次显示.

我是Angular的新手,正在寻找关于如何将一些小部件组件延迟加载(或动态加载？)到我的页面中的信息.我在lazying加载时发现的所有信息都与Angular路由器有关.在这种情况下,路由器不是我需要的,因此很难找到有关如何具体执行此操作的信息.

我所拥有的是一个网站,它有许多可以加载到页面上的小部件.它是可配置的,因此用户可以定义在每个页面上显示哪些小部件,并且可以有任意数量的小部件.其中一些小部件理论上可能非常繁重,所以我不想在网站启动时加载它们.

我还需要传递一个字符串来初始化部分或全部这些小部件.

那么我如何将懒惰(动态？)加载组件/模块加入到我的Angular应用程序中？

我在尝试浏览不同的路线时遇到了问题.

我有两个不同的路线模块.

app.routes.ts:

仅包含LoginPage:

export const routes: Routes = [
  {
    path: 'login',
    component: LoginPageComponent,
    canActivate: [PreventLoggedInAccess]
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'login'
  }
];

export const Routing: ModuleWithProviders = 
    RouterModule.forRoot(routes, { useHash : true });

使用PreventLoggedInAccess.canActivate,如果用户已经登录,则将其重定向到具有/app前缀和子路由的登录部分home.它被定义为:

canActivate(): boolean {
  if (!this._authService.isAuthenticated()) {
      return true;
  }
  this._router.navigate(['/app/home']);
  return false;
}

pages.routes.ts:

包含/app仅在用户登录时才可访问的所有子路由.这可以通过以下方式实现AuthGuardService.canActivateChild:

export const pageRoutes: Routes = [ …

如何使用angular 6 Route Auth Guards用于所有路由Root和Child Routes？