在另一个服务中使用ActivatedRoute

Question

我想在其他服务中使用ActivatedRoute服务。但是，在我的服务中，ActivatedRoute服务正在观察主App组件，并且没有从observable发出路由参数更改。如果我改为在同一模块的组件内观察路由参数，ActivatedRoute服务将按预期运行。

以下是我的目录的简化版本

JSONObject jObj = jsonarray.getJSONObject(i);
int block_id = jObj.has("block_id") ? jObj.getInt("block_id") : 0;

以下是我的路线配置的简化版本：

app/
├──app.module.ts          <- RouterModule Imported Here
├──app.component.ts
|
└──other-module/
   ├──other.module.ts     <- other.service provided here
   ├──other.component.ts  <- ActivatedRoute works as expected
   └──other.service.ts    <- ActivatedRoute watches App component

任何人都可以提供一些如何正确处理和注入服务，以便我可以在另一个服务中使用ActivatedRoute服务。

感谢。

Answer 1

在Angular 2.1.0中，我对ActivatedRoute的这种简单使用有效（请注意，我使用的是queryParams而不是params，因为我想匹配?name=Joe这样的内容。有关详细信息，请参考https://stackoverflow.com/a/39146396/4185989。）

编辑：我的解决方案可能仅仅是因为我正在寻找queryParams，而不是像:id这样的组件网址片段 - 我看到在{{{{}}提交了一个Angular问题3}}对于后者。尽管如此，让我的答案可用，对于那些可能想要查询的人来说，就像我一样。

user.service.ts

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

import {Subscription} from "rxjs/Rx";
import {UserModel} from "./shared/user.model";

@Injectable()
export class UserService {
  protected user: UserModel;
  protected subscription: Subscription;

  constructor(protected activatedRoute: ActivatedRoute) {
    this.subscription = this.activatedRoute.queryParams.subscribe(
      (queryParams: any) => {
        if (queryParams.name) {
          this.setUser(queryParams.name);
        }
      }
    )
  }

  setUser(name) {
    this.user = new UserModel(name);
    console.log('Setting user', this.user);
  }

}

user.model.ts

import {Injectable} from "@angular/core";

@Injectable()
export class UserModel {

  constructor(public name: string) {}
}

user.module.ts

import { NgModule } from '@angular/core';
import {UserService} from "./user.service";

@NgModule({
  imports: [
  ],
  declarations: [
  ],
  exports: [
  ],
  providers: [
    UserService
  ]
})
export class UserModule { }

app.component.ts

import { Component } from '@angular/core';
import {UserService} from "./core/user/user.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(
    protected userService: UserService
  ) {
  }
}

Answer 2

我遇到了类似的问题，但找不到合适的解决方案。事实上，我刚刚打开了一个错误报告（请参阅https://github.com/angular/angular/issues/12938），要么检查它，要么就如何解决这个问题找到方向。

作为临时工作，我确实设法使用以下内容从服务实现相对于当前网址（不是更深层次）的网址导航

this.router.navigate([ this.router.url.concat('/relativepath') ]);

请注意，这是一个非常糟糕的临时解决方法，应该替换为正确的

this.router.navigate(['./relativepath'], {relativeTo: this.activatedRoute}) 

是否应支持此功能。