Angular 2在服务中获取routeParams

标签 angular angular2-routing angular2-services

我想将逻辑从组件转移到服务。但是我发现我无法获取服务中的routeParams。

我的组件看起来像

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

import { MyService }              from '../services/my.service';

@Component({
  moduleId: module.id,
  templateUrl: 'my.component.html',
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  constructor(private myService: MyService, private route: ActivatedRoute) {;}

  public ngOnInit() {
    this.route.params
      .subscribe((params: Params) => {
        debugger;
        console.log(params);
      });
    this.myService.getParams()
      .subscribe((params: Params) => {
        debugger;
        console.log('Return1:');
        console.log(params);
      }, (params: Params) => {
        debugger;
        console.log('Return2:');
        console.log(params);
      }, () => {
        debugger;
        console.log('Return3:');
    });
  }
};

我的服务看起来像

import { Injectable }                     from '@angular/core';
import { Params, ActivatedRoute }         from '@angular/router';

import { Observable }                     from 'rxjs';

@Injectable()
export class MyService {
  constructor(private route: ActivatedRoute) {;}

  public getParams(): Observable<Params> {       
    this.route.params.subscribe((params: Params) => {
      debugger;
      console.log('Service1:');
      console.log(params);
    }, (params: Params) => {
      debugger;
      console.log('Service2:');
      console.log(params);
    }, () => {
      debugger;
      console.log('Service3:');
    });
    return this.route.params;
  }
};

当我调试时,我可以看到参数在组件中被填充而在服务中为空。这就是结果

Component:
Object {param: "1"}
Service1:
Object {}
Return1:
Object {}

我正在使用 Angular 2.0.0。为什么组件和服务会有所不同?是否可以在服务中获取参数?

编辑: https://github.com/angular/angular/issues/11023

最佳答案

根据 this你必须向下遍历路由树并从树底部的路由获取数据。

@Injectable()
export class MyService{

  constructor(private router:Router,private route:ActivatedRoute){   
   this.router.events
    .filter(event => event instanceof NavigationEnd)
     .subscribe((event) => {
         let r=this.route;
         while (r.firstChild) {
            r = r.firstChild
        }
         //we need to use first, or we will end up having
         //an increasing number of subscriptions after each route change.   
         r.params.first().subscribe(params=>{                
           // Now you can use the params to do whatever you want
         });             


    });            
  }
}

关于Angular 2在服务中获取routeParams,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40219790/

相关文章:

requirejs 未加载 Angular2 路由

angular - 未处理的 promise 拒绝 : Cannot find primary outlet to load component Angular2

node.js - 类型错误 : Cannot create property '_id' on string '{"[object Object ]":""}'

javascript - Angular 2 使用现有提供者

angular - 在 Angular2 中,如何使用注入(inject)服务中的值来设置静态变量?

firefox - Angular 2 + firefox + input + type=date datepicker 不显示

javascript - 将 Angular 组件输入参数传递给 CSS 的子 div

angular - 触摸/未触摸未在自定义输入组件中更新 - Angular 2

angular2-routing - 使用 AOT 和 Rollup 的 Angular 2 子模块路由

angular - 当用户离开应用程序时删除 session 存储