複数の「ボタン」パラメータをAngularコンポーネントに渡す

debugcn 投稿 Dev

サンポ

Angular1.5を使用して再利用可能なアイテムピッカーコンポーネントを作成しています。ピッカーには、検索フィールドと選択できるアイテムのリストがあります。ピッカーの使用例の例は、ユーザーがいくつかのアイテムを選択してから「続行」ボタンを押して続行するポップアップです。

概念的には、検索フィールドとアイテムのリストはコンポーネントに属し、[続行]ボタンは周囲のダイアログに属します。ただし、ボタンを検索フィールドの横に配置したいと思います。追加のボタンがない場合もあれば、1つの追加ボタンがある場合もあれば、2つある場合もあります。

このようなもの：

そのようなコンポーネントを作成するための最良の方法は何ですか？

私が考えたオプション：

アイテムピッカーのコンポーネント/ディレクティブを作成し、HTMLのディレクティブの前後にボタンを配置し、CSSを使用してボタンを配置します。

ここでは、ボタンの位置がHTML内の適切な位置にないため、醜くて壊れやすいです。おそらく、ラッパーdivと、ピッカーコンポーネントの上に絶対配置する必要があります。

<div style="position: relative"> <item-picker></item-picker> <button name="Continue" ng-click="submit()" style="position:absolute; top:5px; right: 5px"></button> </div>
どういうわけか、ボタンとコールバックをパラメータとしてアイテムピッカーコンポーネントに渡します。ここでの醜さは、ボタンとスタイル、およびボタンの数のハードコーディングにあります。

<item-picker btn1-text="Continue" btn1-style="primary" btn1-callback="submit()" btn2-text="Cancel" btn2-style="secondary" btn2-callback="cancel()"></item-picker>

ボタンの構成とコールバックを単一の構成オブジェクトとして渡すことができるかどうかはわかりません。私は主にコールバック関数について心配しています'&'。適切なコールバックバインディングではなく、構成オブジェクトを介して渡された場合に正しく機能するかどうかです。
ピッカーをコンポーネント/ディレクティブにしようとするのをやめ<ng-include>、スコープからボタン構成を読み取るピッカーコードを含めるために使用します。醜さは、スコープがなく、コンポーネントを使用していません。

そのような場合のベストプラクティスはありますか？

o4ohel

考えられる解決策の1つは、ng-transcludeを使用することです。これにより、コードは次のようになります。

マークアップ

<item-picker>
  <button ng-click="parentScopeFn()">Btn 1</button>
  ...
</item-picker>

指令

angular.module('myApp', [])
.directive('itemPicker', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      ...
    },
    templateUrl: 'item-picker.html'
  };
});

itemPickerテンプレートマークアップ

<div class="item-picker">
  <div class="item-picker-controls">
    <div class="item-picker-search"><input type="search" ng-model="..."></div>
    <div class="btn-group" ng-transclude></div>
  </div>
  <ul class="item-picker-list">
    <li ng-repeat="item in items" ng-bind="item"></li>
  </ul>
</div><!-- end item-picker template -->

もちろん、上記のコードは単なる例であり、itemPickerコンポーネントについて多くの仮定を行っています。また、ボタンの配置にはCSSを使用する必要がありますが、b / cを使用すると、コンポーネントのコンテキストで推論する方が簡単な場合があります。

注「マルチスロットトランスクルージョン」を利用することもできます。これは、ボタンの数と種類が予測可能であり、マークアップにどのように配置されていても一貫した方法で配置したい場合におそらく役立ちます。

お役に立てれば。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

複数の「ボタン」パラメータをAngularコンポーネントに渡す

複数の「ボタン」パラメータをAngularコンポーネントに渡す

パラメータをコンポーネントに渡す

Angularコンポーネントのゲッターにパラメーターを渡す代わりに

コンポーネントAngular2のセレクターにパラメーターを渡します

Angular 1.5は、パラメーターを持つ関数をコンポーネントに渡しますか？

Knockoutの子コンポーネントにパラメータを渡す

パラメータ付きの関数を子コンポーネントに渡すReactDOM

静的な小道具と動的なパラメータを複数のコンポーネントを含むVueルートに渡す

React Nativeでコンポーネントにパラメーターを渡す

extjsパラメータをコンポーネント設定に渡す方法

ナビゲーションコンポーネントの引数を使用して複数のフラグメントにデータを渡す

Angular2-動的に生成されたコンポーネントにパラメータを渡しますか？

コンポーネントをパラメーターとして関数に渡すReact

子コンポーネントから親に関数を介してパラメータを渡すReact Redux

ルート内のコンポーネントにパラメータを渡すことが可能です

関数をパラメーターとしてAngularコンポーネントを介して（クリック）イベントに渡します

laravel 5 のルートからコントローラーに複数のパラメーターを渡す

パラメータをコンポーネントに戻す

UIルーターのangular1コンポーネントにresolveパラメーターを渡します

残り火コンポーネントから複数のパラメーターを送信します

routerLinkを使用して1つのコンポーネントにパラメータを渡す方法は？

Angular 7：* ngForコンポーネントと変数パラメーターの受け渡し

ボタンコンポーネントをブートストラップタブコンポーネントのタイトルプロップに渡す

Reactコンポーネントをパラメーターとして別のReactコンポーネントに渡す

ルーターパラメータをコンポーネントオブジェクトに渡す

Reactルーターがパラメーターをコンポーネントに渡す

React Native関数コンポーネント内の関数のパラメーターを渡すにはどうすればよいですか？

計算されたパラメータをあるVueコンポーネントから別のコンポーネントに渡す方法は？

あるコンポーネントから別のコンポーネントにパラメータを渡す方法

javascript関数のパラメーターに複数のコントロールを渡す