Question

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

例如：

function Test(){
var argu = [1, 2];
$.ajax({
        type: 'POST',
        url: 'MyPage.aspx/Foo',
        data: '{args: ' + JSON.Stringify(argu) + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
           // Success
        },
        error: function (response) {
           // Failed
        }
      });
}

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

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

我已将上面的示例代码放在一起，当控制器可以处理来自绑定的值时，该部分缺失。

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

您知道显示它的位置，博客条目还是任何来源？

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

组件：

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

控制器：

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();
        }

Answer 1

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

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

主要问题是您使用“＆lt;”绑定，这是一种单向绑定。因此它尝试访问未在您的范围中定义的“btfs”变量，因此undefined绝对是正确的输出。要使用字符串，请使用“@”，请参阅https://docs.angularjs.org/guide/component

constructor（）{ this.bindings = { 模块：'@' } }
不要注入模块var。只需在控制器中定义它以满足typescript编译器。

public module：string;
你不需要控制器。模板自动获取通过$ ctrl注入的范围，请参阅我在medium的示例。但不确定那是否很重要
正如我在帖子中描述的那样，将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

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

1 个答案: