15

我想知道在 Angular 1.5 中，当您使用组件时，是否有一种简单的方法可以绑定一个布尔属性而不用 @ 转换为字符串。

例如，我有两个组件“app-menu”和“app-menuitem”没有嵌入。“app-menu”只有一个属性，它是要创建“app-menuitem”的项目列表。

<app-menu items="menuitems">

在作为 json 的菜单项中，您有一个名为“isactive”的菜单项属性，它是一个布尔值。

$scope.menuitems = [{ label : 'menuitem 1', isactive : true},{ label : 'menuitem 1', isactive : false}]

在 menuitem 组件中：

angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      bindings: {
        label: '@',  
        isactive: '@' //<--- The problem is here because the boolean is converted as string
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });

我不知道最后确定的最好方法是一个真正的布尔值，而不是一个让我产生一些错误的字符串。有人有想法吗？

4

3 回答 3

26

从 angular 1.5 开始，您可以使用<&@进行单向绑定。这两者之间的主要区别在于<能够将具有原始数据类型的对象传递给组件。

isactive: '<'
于 2016-04-16T17:16:39.273 回答
6

只需使用单向绑定而不是字符串绑定：

angular.module('app')
    .component('appMenuitem', {
      transclude: false,
      controller: menuitemController,
      bindings: {
        label: '@',  
        isactive: '<'
      },
      templateUrl: 'angular/components/simple/menuitem/menuitem.html'
    });
于 2016-04-16T17:16:36.943 回答
4

<强制您使用true和false作为您的属性值，这并不完全类似于 HTML。例如，我们经常写：

<input type="text" disabled>

代替

<input type="text" disabled="disabled">

要继续对您的 AngularJS 组件执行此操作，您可以使用parse-string-boolean（或类似）的@绑定：$onChanges

bindings: {
  paramSomething: '@something'
}

,

function $onChanges(changes) {
  if (changes.paramSomething) {
    switch (typeof this.paramSomething) {
      case 'string': {
        this.isSomething = parseBoolean(this.paramSomething, true);
        break;
      }
      case 'undefined': {
        this.isSomething = false;
        break;
      }
    }
  }

,

<my-component something></my-component>
于 2018-03-15T19:03:26.363 回答