angularjs – 在另一个服务中使用ActivatedRoute

2023年3月3日 198次阅读

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

这是我的目录的简化版本

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

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

export const routes: Routes = [
  { path: '', component: App },
  { path: 'other/:id', component: Other }
];

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

谢谢.

最佳答案 在Angular 2.1.0中,我使用了ActivatedRoute这种简单的用法(注意我使用的是queryParams而不是params,因为我想匹配类似于？name = Joe.参考
https://stackoverflow.com/a/39146396/4185989以获取更多信息.)

编辑：下面我的解决方案可能只是因为我正在寻找queryParams,而不是组件URL的片段,如：id – 我看到在https://github.com/angular/angular/issues/11023为后者提交了一个Angular问题.尽管如此,让我的答案可用,对于那些可能想要查询的人来说,就像我一样.

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
  ) {
  }
}
点赞