Question

我创建了一个pageSettings界面

module app.common {
  export interface IPageSettings {
    pageTitle : string;
    pageDesc  : string;
  }

  export class PageSettings implements IPageSettings {
    constructor(public pageTitle : string,
                public pageDesc  : string
    ) {
    }
  }
}

在控制器中，我正在调用该接口

module app.home {
interface IKeysModel {
    pageSettings: app.common.IPageSettings;
}

class KeysCtrl implements IKeysModel {
    pageSettings: app.common.IPageSettings;

    static $inject = [];
    constructor() {
        var vm = this;
        vm.pageSettings.pageTitle = "Keys",
        vm.pageSettings.pageDesc = "List of your keys"
    }
  }
  angular.module("app").controller("keysCtrl", KeysCtrl);
}

此代码不起作用。但是，如果我将对接口属性的调用更改为此

vm.pageSettings = {
     pageTitle: "Keys",
     pageDesc : "List Of Your Keys"
}

然后工作正常。我只是想知道为什么？我觉得第一项任务应该有效。我对打字稿很新，只是试图理解这种语言。

进一步的背景。这是视图

<div class="page-title">
  <h2>{{::vm.pageSettings.pageTitle}}</h2>
  <h6>{{::vm.pageSettings.pageDesc}}</h6>
</div>

Answer 1

我认为你应该初始化变量vm.pageSettings：

vm.pageSettings = <app.common.IPageSettings>{};

在设置字段之前

：pageTitle和pageDesc

Typescript接口语法在控制器中不起作用

1 个答案: