如何在Angular 1.5和Typescript中获取组件控制器中的绑定值?

How is possible to get the bindings value in component controller with Angular 1.5 and Typescript?

本文关键字：组件 获取 控制器 绑定 Typescript Angular      更新时间：2023-09-26

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

例如:

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

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

我一直在谷歌周围一段时间如何实现这一点，我发现这和这篇文章和这篇文章。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"
                        }
                    }
                });

绑定在控制器范围内可用，所以这个。

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

  1. 主要问题是您使用了"<"绑定，这是一种单向绑定。因此，它尝试访问"btfs"变量，该变量在您的作用域中未定义，因此未定义是绝对正确的输出。要使用字符串，请使用"@"，参见https://docs.angularjs.org/guide/component

    构造函数(){这一点。绑定= {模块:"@"}}

  2. 不要注入模块变量，只需在控制器中定义它以满足typescript编译器。

  3. 你不需要控制器。模板通过$ctrl自动获得注入的作用域，参见我在medium中的例子。但不确定这是否关键

  4. 正如我在我的帖子中所描述的，放置angular总是一个好主意。源文件

    5. 底部的模块调用

修改代码:

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玩

相关文章：