如何使用 Angular 1.5 和 Typescript 在组件控制器中获取绑定值？

Question

我想创建一个左侧菜单组件，它根据通过绑定获得的字符串显示不同的菜单结构。

例如：

<left-hand-menu-component module='abc'></left-hand-menu-component>

然后它只显示 abc 模块的菜单结构。为了实现这一点，组件控制器必须能够通过绑定处理数据并进行必要的服务调用。

我已经在谷歌上搜索了一段时间如何实现这一点，我找到了 this 和 this 帖子和 this 帖子。 Angular 文档中提供的示例太简单了。

我已经将上面的示例代码放在一起，当控制器可以处理通过绑定传入的值时，该部分就丢失了。

甚至有可能吗？或者它是一个指令而不是一个组件？

你知道它在哪里显示、博客条目或任何来源吗？

控制器构造函数中的两个console.log写出'undefined'作为结果。

组件：

module qa.gonogo {
    "use strict";

    export class LeftHandMenuComponent implements ng.IComponentOptions {


        public transclude: boolean = false;
        public controller: Function = LeftHandMenuComponentController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/content/lefthandmenu/leftHandMenuComponentTemplate.html";
        public bindings: any;

        constructor() {
            this.bindings = {
                module: '<'
            }
        }
    }

    angular
        .module("goNoGo")
        .component("gonogoLefthandmenuComponent", new LeftHandMenuComponent());

}

控制器：

export class LeftHandMenuComponentController implements ILeftHandMenuComponentController {

        menuStructure: IMenuStructure[];
        closeOthers: boolean = true;

        static $inject = [];

        constructor(public module: string) {
            console.log('binding', module);
            console.log('binding2', this.module);
        }

        public $onInit = (): void => {
            this.populateMenuStructure();
        }

路线。

$stateProvider
            .state("bfts",
                <ng.ui.IState>{
                    url: "/bfts",
                    views: <any>{
                        "leftHandMenu": <ng.ui.IState>{
                            template: "<gonogo-lefthandmenu-component module='bfts'></gonogo-lefthandmenu-component>"
                        },
                        "content": <ng.ui.IState>{
                            template: "bfts content"
                        }
                    }
                });

Answer 1

绑定在控制器范围内可用，因此 this.module 必须工作。

我在 plnkr 中复制了您的代码，发现以下错误。

1. 主要问题是您使用了“https://docs.angularjs.org/guide/component

   构造函数() { this.bindings = { 模块： '@' } }

2. 不要注入模块变量。只需在您的控制器中定义它以满足打字稿编译器。

   公共模块：字符串；

3. 您不需要控制器。模板会自动通过 $ctrl 获取作用域，请参阅我在 medium 处的示例。但不确定这是否很关键

4. 正如我在帖子中所描述的，将 angular.module 调用放在源文件的底部总是一个好主意

修改代码：

angular.module('goNoGo', []);


class LeftHandMenuComponent implements ng.IComponentOptions {


    public transclude: boolean = false;
    public controller: Function = LeftHandMenuComponentController;
    //public controllerAs: string = "vm";
    public template: string = "<div>module :{{$ctrl.module}}</div>";
    public bindings: any;

    constructor() {
        this.bindings = {
            module: '@'
        }
    }
}



class LeftHandMenuComponentController {

  menuStructure: IMenuStructure[];
  closeOthers: boolean = true;
  public module: string;

  static $inject = [];

  constructor() {
      console.log('binding2', this.module);
  }

  //public $onInit = (): void => {
    //  this.populateMenuStructure();
}

angular
    .module("goNoGo")
    .component("gonogoLefthandmenuComponent", new LeftHandMenuComponent());

angular.element(document).ready(function () {
  angular.bootstrap(document, ['goNoGo']);
});

您可以在 plnkr http://plnkr.co/edit/TVI9l8 中玩耍