Angularjs + Typescript，如何将 $routeParams 与 IRouteParamsService 一起使用

Posted 2023-02-22

【中文标题】Angularjs + Typescript，如何将 $routeParams 与 IRouteParamsService 一起使用

【英文标题】：Angularjs + Typescript, How to use $routeParams with IRouteParamsService

【发布时间】：2014-08-10 12:57:42

【问题描述】：

我正在使用 $routeParams 从 URI 中提取属性并将本地变量设置为它们。

当我使用打字稿键入来设置 $routeParams 的类型时，我无法访问 $routeParams。

如何访问 $routeParams 中的属性？

class Controller
    constructor($routeParams: ng.route.IRouteParamsService, private $location: ng.ILocationService)
        this.propetry1 = this.getProperty1($routeParams.property1);
    

    property1: string;

    getProperty1(input: string):string
        return (input || "Not present");
    

ng.route.IRouteParamsService 代码为：

interface IRouteParamsService 
    [key: string]: any;

这有一个错误：属性 'property1 在 ng.route.IRouteParamsService 的类型上不存在'

如果我将 $routeParams 的类型更改为 :any 那么它会正确设置 property1。 如何在仍然访问 $routeParams 中的属性的同时保持 Typescript 的严格类型？

【参考方案1】：

想通了。您需要声明一个使用 IRouteParamsService 的接口并指定您要使用的属性。

 interface IRouteParams extends ng.route.IRouteParamsService 
    property1:string;
 

 class Controller
    constructor($routeParams: IRouteParams, private $location: ng.ILocationService)
        this.propetry1 = this.getProperty1($routeParams.property1);
    

    property1: string;

    getProperty1(input: string):string
        return (input || "Not present");
    
  

注意控制器构造函数的变化。

【参考方案2】：

您可以使用$routeParams['property1'] 代替$routeParams.property1