0

私はAngular-Typescriptの概念に非常に慣れていません。

セットアップはTypescript、Angular 1.5 コンポーネント、可能であれば $scope を使用しない

1 つのコンポーネントには検索入力フィールドがあります。別のコンポーネントは、サービスから戻り値を取得してレンダリングする必要があります。

オンラインの多くの記事では、コントローラー (コンポーネント) 間のデータ共有にサービスを使用することを提案しています。しかし、これらの解決策は私のケースと実際には一致しません。純粋な angular または $scope または typescript を使用しないかのいずれかです。

これまでの私の結果: サービスを介して変数を渡そうとすると、最初のコンポーネントのコントローラーの下に表示されます。2番目のコンポーネントのコントローラーはヒットせず、(コンストラクターを介して)渡される変数/パラメーターにも値がありません。

コード例については、以下のコメントを参照してください

4

2 に答える 2

0

角度 イベントを使用して、コントローラー間で非同期に通信できます。リスナー コントローラーを$scope.$on('inputChanges')でサブスクライブし、入力が変更されたら (変更を検出するには $watch または ng-change ディレクティブを使用する必要があります)、$rootScope.$broadcastまたは$scopeでイベントを送信します。 .$emit (どちらを使用するかは、親/子コントローラーの構造の問題です。角度ドキュメントhttps://docs.angularjs.org/api/ng/type/ $rootScope.Scope の違いを参照してください)。

$scope とそれを使用しないことについて、Angular は現在ControllerAs構文を使用することを推奨していますが、$scope を使用してもまったく問題はありません。ワンタイムバインディングを使用して不要なウォッチャーを回避する方法に注意し、 $injectを使用してコントローラーとコンストラクターに注入することを忘れないでください。

于 2016-09-20T11:37:47.510 に答える
0

コントローラーからコンポーネントに変数をバインドできます。

例: 各コンポーネントにsearchModel2-way bindingという名前のバインディングを定義します。つまり、コンポーネントとして<comp-a>andを指定し、コンポーネントが使用されるビューのコントローラーとしてコントローラーを定義すると、次のように実行できます。<comp-b>$ctrl

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>
</div>

2 つのコンポーネントとビュー コントローラー上の同じモデルにバインドされているため、一方が変更された場合 (たとえば、「検索」コンポーネントである comp-a)、もう一方のコンポーネントも変更を取得します。

これは、コンポーネントの複数のインスタンスを使用できる場合に便利です。したがって、View Controller で異なるモデル変数を使用して、2 つのコンポーネントの各セットを接続できます。

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>

    <!-- changes in $ctrl.search2 will not reflect to comp-b above, only the one below -->
    <comp-a search-model="$ctrl.search2"></comp-a>
    <comp-b search-model="$ctrl.search2"></comp-b>
</div>
于 2016-09-20T09:32:08.423 に答える