Question

是否有任何方法可以为组件的@绑定指定默认值。

我已经看过如何使用指令进行指导：How to set a default value in an Angular Directive Scope?

但是组件不支持编译功能。

所以，我有这样的组件：

{
  name: 'myPad',
  bindings   : {layout: '@'}
}

我希望释放组件的用户必须指定'layout'属性的值。所以......，这个：

<my-pad>...</my-pad>

而不是：

<my-pad layout="column">...</my-pad>

而且......这个'layout'属性应该被使用的角度材质JS所消耗，所以它需要在渲染DOM之前被绑定（所以材质JS可以拾取它并添加元素的相应类）。

更新，一些截图来澄清情况：

组件定义：

{
  name : 'workspacePad',
  config : {
    templateUrl: 'src/workspace/components/pad/template.html',
    controller : controller,
    bindings   : {
      actions: '<', actionTriggered: '&', workspaces: '<', title: '@',
      flex: '@', layout: '@'
    },
    transclude: {
      'workspaceContent': '?workspaceContent'
    }
  }
}

组件用法：

<workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
  action-triggered="$ctrl.performAction(action)">
  <workspace-content>
    <div flex style="padding-left: 20px; padding-right: 20px; ">
      <p>test test</p>
    </div>
  </workspace-content>
</workspace-pad>

我想在第二个截图（使用）选项中制作“flex”和“layout”。

更新

我的“解决方案”在我的组件的构造函数中有这个：

this.$postLink = function() {
  $element.attr("flex", "100");
  $element.attr("layout", "column");
  $element.addClass("layout-column");
  $element.addClass("flex-100");
}

我希望我没有必要编写最后两行（addClass）...但是，因为我们没有链接和编译组件....我想我现在应该对此感到满意

Answer 1

首先是组件Angularjs Compoents`的精彩文档。另外你以前做过什么，你可以通过使用它或在控制器本身中检查它来使它成为可选项。

例如，你保持绑定，但在你的控制器中你有类似的东西。

var self = this;

// self.layout will be the value set by the binding.

self.$onInit = function() {
    // here you can do a check for your self.layout and set a value if there is none
    self.layout = self.layout || 'default value'; 
}

这应该可以解决问题。如果没有，还有其他生命周期钩子。但是我已经用我的组件做了这个，甚至在$ onChanges中使用它，它在$ onInit之前运行，你实际上可以在$ onChanges函数中检查isFirstChange()，我很确定它只会运行一次加载。但是我自己没有测试过。

您可以查看其他生命周期钩子。

修改

这很有意思，因为我之前以这种方式使用过它。你可能面临其他一些问题。虽然这是一个想法。如果您将保存的值设置为父控制器中的var并将其传递给具有＆＃39;＆lt;＆＃39;而不是＆＃39; @＆＃39;。这种方式是通过引用而不是值传递，您可以设置监视某些内容并更改var，如果没有为该var设置任何内容使其成为默认值。

使用angularjs组件＆＃39; @＆＃39;没有被组件观看，但是＆＃39;＆lt;＆＃39;此组件的父级中的任何更改都将传递给组件，因为＆＃39;＆lt;＆＃39;而被看到。如果你要改变＆＃39; @＆＃39;在父控制器中，您的组件不会看到此更改，因为它不是onChanges对象的一部分，只有＆＃39;＆lt;＆＃39;价值观是。

Answer 2

如果未设置绑定值，则设置值询问undefined中的值是null还是$onInit()。

const ctrl = this;
ctrl.$onInit = $onInit;
function $onInit() {
  if (angular.isUndefined(ctrl.layout) || ctrl.layout=== null)
    ctrl.layout = 'column';
}

即使layout的值为false，这也有效。

Answer 3

在构造函数中定义绑定变量只会使用所需的默认值启动变量，并在初始化后使用绑定更新值。

    //ES6
    constructor(){
      this.layout = 'column';
    }
    $onInit() {
      // nothing here
    }

Answer 4

你可以使用

$onChanges({layout}) {
    if (! layout) { return; }
    this.setupLayout(); ---> or do whatever you want to do
}

@ binding的angular 1.5组件/默认值

更新

4 个答案:

修改