2

Angular 2 ベータ版を試していて、セマンティック UI ドロップダウン コントロールを Angular 2 コンポーネントとして使用したいと考えています。

http://semantic-ui.com/modules/dropdown.html#converting-form-elements

私の小さなサンプルプロジェクトはここにあります:

https://github.com/uNki23/angular2semantic/

ここでわかるように、Angular 2 コンポーネント 'UiSelectComponent' 内にラップしました。

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/ui-select.component.ts

他のコンポーネントは、2 つのオブジェクトを渡すことによって UiSelectComponent を使用する必要があります: 可能な選択肢を保持する配列と、オプションの事前定義された選択された選択肢です。'value' (数値) と 'displayValue' (文字列) の 2 つのプロパティを持つ選択 'SelectOption' のインターフェイスを作成しました。コンポーネントは次のように使用する必要があります。

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/app.component.html

最初の質問: 私が達成したいことは、事前に選択されたオプションが UiSelectComponent に渡され、ユーザーの選択がそのオプションを変更し、そのオプションが選択されたオブジェクトを親コンポーネントから変更する必要があることです。親コンポーネントが UiSelectComponent から選択されたオプションを知る必要があることは明らかですよね?

2 番目の質問: setTimeout() 関数内で .dropdown() 関数をラップすると、セマンティック UI ドロップダウン内で最初に選択されたオプションを設定するだけで機能します。Angular 2 では、変更を可視化するためにそのようなものはもう必要ないと思いましたか?

この 2 日間で見つけたあらゆる方法を試しました。今、あなたの助けが必要です :)

前もって感謝します！！

4

2 に答える 2

3

Angular 2 にはその特定の意味で双方向のデータ バインディングが存在しないため、常に変更を明示的に伝達する必要があります。

で変更しEventEmitterたときにイベントを発行するために使用します。すべての親コンポーネントは、イベント バインディング構文を使用して宣言的にそのイベントをサブスクライブできます。choice<child><child (selectedChange)="doSth()">

ここに作業プランクがあります: http://plnkr.co/edit/2SsgStP3P4DNgXEES8c8?p=preview

于 2016-01-18T16:06:00.610 に答える
3

最初の質問: 出力 (EventEmitter) プロパティを使用して、子で何かを変更したときに親にイベントを発行できます。親テンプレートは、このイベントをリッスンする必要があります: <child (someChildEvent)="myCallback()" ...>.

ただし、共有したいオプション データが子に渡すオブジェクト内にある場合 – <child [someChildProperty]="sharedObj" ...>、親と子の両方が same/one への参照を持っているsharedObjため、子で行った変更はすべて親。EventEmitter は、変更が発生したときに実際に親に通知できるため、より良い選択である可能性があります... しかし、親はsharedObj.

2 番目の質問: 私はあなたのコードを見ていませんでしたが、サードパーティのコンポーネントがレンダリングまたは初期化を完了するのを待つ必要がある可能性があるため、タイムアウトが必要になる場合があります。

于 2016-01-16T16:50:26.303 に答える