web-dev-qa-db-ja.com

angular 1.5コンポーネント/ @バインディングのデフォルト値

コンポーネントの@バインディングのデフォルト値を指定する方法はありますか？.

ディレクティブでそれを行う方法の説明を見てきました： Angularディレクティブスコープにデフォルト値を設定する方法

ただし、コンポーネントはコンパイル機能をサポートしていません。

だから、私はこのようなコンポーネントを持っています：

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

コンポーネントのユーザーが 'layout'属性の値を指定する必要がないようにします。したがって、この：

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

これの代わりに：

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

そして...この「レイアウト」属性は、使用している角度マテリアル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>

2番目のスクリーンショット（使用法）の「フレックス」と「レイアウト」をオプションにしたいと考えています。

更新

これを私のコンポーネントのコンストラクターに含めるための「解決策」：

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

最後の2行（addClass）を記述する必要がなかったと思いますが、リンクとコンポーネントのコンパイルがないので...とりあえず満足していると思います。

angularjsbindingweb-component
12
Cokorda Raka

まず、コンポーネントの優れたドキュメント Angularjs Components` です。また、私が以前にやったことと、それを使用するか、コントローラー自体でチェックすることにより、オプションにすることができます。

たとえば、そこにバインディングを保持しますが、コントローラーには次のようなものがあります。

_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'; 
}
_

これでうまくいくはずです。そうでない場合、他のライフサイクルフックがあります。しかし、これをコンポーネントで実行し、$ onInitの前に実行される$ onChangesで使用しました。実際に$ onChanges関数でisFirstChange()のチェックを実行できます。負荷に。しかし、私自身はテストしていません。

あなたが見ることができる他のライフサイクルフックがあります。

編集する

私は以前このように使用したことがあるので、それは興味深いです。他の問題に直面している可能性があります。ここはアイデアですが。親コントローラーのvarに保存された値を設定し、「@」ではなく「<」を使用してコンポーネントに渡すとどうなりますか。この方法では、値の代わりに参照で渡し、何かに監視を設定し、その変数に何も設定されていない場合は変数を変更してデフォルトにすることができます。

Angularjsコンポーネントでは、 '@'はコンポーネントによって監視されませんが、 '<'を使用すると、このコンポーネントの親の変更はコンポーネントに渡され、 '<'のために表示されます。親コントローラーで '@'を変更した場合、コンポーネントはこの変更を認識しません。これは、onChangesオブジェクトの一部ではないため、 '<'の値のみであるためです。

11
mjwrazor

値を設定するにはバインドされた値が設定されていない場合$onInit()の値がundefinedまたはnullであるかどうかを尋ねます。

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

これは、layoutの値がfalseであっても機能します。

6
flob

コンストラクターでバインディング変数を定義すると、目的のデフォルト値で変数が開始され、初期化後に値がバインディングで更新されます。

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

あなたは使うことができます

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