- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想将逻辑从组件转移到服务。但是我发现我无法获取服务中的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。为什么组件和服务会有所不同?是否可以在服务中获取参数?
最佳答案
根据 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/
在上面的代码中,第一个 console.log 返回未定义 但第二个返回一个已设置 cpf 属性的对象。为什么? 我的网址:http://xxxxxxx/#!/cpf/68473303253 我的
我正在尝试将查询参数附加到从 URL 获取的所有 API 调用中。 factory('Post', function ($resource, $routeParams) { return $r
我尝试使用两个 $routeParams ,但是,仅显示路线的 templateUrl 。能够在所有 Controller 中使用 $routeParams 的最佳解决方案是什么? 路线 angula
有些我是路由和单页 Web 应用程序的新手,但我一直在努力正确学习 Angular。然而我遇到了一些麻烦和一些奇怪的问题。我遵循了构建目录的指南,我的目录如下所示: app/ componen
我正在使用 $routeParams 服务。当我在 Controller 中使用 console_log($routeParams) 服务时,我会在控制台中看到所有值。 但是,当我控制台记录 $rou
我正在使用this加载数据的技术。所以我创建了以下解析函数: NoteController.resolve = { note: function($routeParams, Note) {
我有一个访问页面 $routeParams 的指令,如下所示: myApp.directive("myList", function ($routeParams) { return {
我需要捕获查询字符串,但是出现错误。我使用的代码很简单,但是在浏览器中却失败了。 @Component({ selector: 'body', viewProviders: [ ROU
我有一个 Controller ,我正在尝试使用 $routeParams 访问参数,但是当我使用 console.log 检查值时,正在引用 lodash。 (function() { 'use
我正在尝试使用 $routeParams 获取 URL 参数: var myApp = angular.module('myApp', [ 'ngRoute', 'appControllers
我对 Angular JS 很菜鸟,但我遇到了问题。指令console.log($routeParams) 显示routeParams 为空,我不知道为什么。我使用 ionic yeoman 生成器创
我可以使用访问查询网址参数 $scope.$on('$routeUpdate', function () { var id = $routeParams.id //check if
我有一个“项目”页面,无论您是查看项目列表还是查看单个项目,我都试图访问该页面,但不使用子组件。 考虑: 应用路由器配置 { path: '/projects/...', component: Pro
有没有办法访问 redirecTo-Statement 中的 routerParams? 我想将“Order”路由的 orderId 传递给“OrderDashboard”路由,但我不知道该写什么来代
我想知道我如何拥有多个路由参数,如果你们中的任何人可能知道它的教程或答案,我将非常感激。 这是我正在做的 http://jaysg.com/newApp/#/ 我希望它是#/:region/:coun
我找到了这个 answer在另一个SO问题中。但我也想在一些页面标题中使用路由参数。 如果我有 $routeProvider像这样: $routeProvider.when('/demo/:name/
我有一个非常简单的 Angular 应用程序,我将其提炼为以下内容: var napp = angular.module('Napp',['ngResource']); var CompanyCtrl
有什么区别: $routeParams and $stateParams 什么时候用什么? 最佳答案 两者都来自不同的路由器模块。您可以在您的应用程序中使用任何人。 如果您使用 ngRoute模块,那
我正在尝试使用 Angular routeProvider 和routeParams 来获取id 和name 参数。这是js: angular.module("test",["ngRoute"])
Or, I'm not doing Single Page in the strict sense ... 嗨, 首先一些 背景 我要求所有先前加载的页面都需要保留在屏幕上,以便保留状态而不保存到存储
我是一名优秀的程序员,十分优秀!