問題タブ [angular-component-router]

angular 1.5 でリリースされた新しい .component を採用しようとしています。モジュールがどこに収まるかを理解するのに苦労していますが。

コンポーネントをAngularモジュールに分割する前は、コンポーネントがここにあるため、これにはどのような関係がありますか?

角度モジュールを 1 つ作成し、その下にすべてのコンポーネントを追加するか、角度モジュールとコンポーネントを引き続き使用しますか?

ドキュメントはこれに入っていないようです。まだモジュールを使用している場合、コンポーネントの使用は何ですか? または、コンポーネントを使用している場合、複数のモジュールの使用は何ですか?

新しい Angular 1.5 または 2.0 コンポーネントを作成したとき、たとえば 3 文字を使用してコンポーネントの名前の前にまだ付ける必要がありますか?

abc は他のコンポーネントとの重複を避けるための名前ですか?

これがまだ必要かどうかはわかりませんでしたが、実際にはあまり使用されていません。

どの方向に進むべきですか？

angularjs 1.5 コンポーネント ルーターを使用してアプリを作成しました。親コンポーネントが内部の子コンポーネントに値を渡し、子コンポーネントがコールバックを親コンポーネントにバインドするようにするにはどうすればよいでしょうか。

app.js

components.js

myNews.html

latestNews.html

だから、latestNews.html で seeMore をクリックすると、 myNewsコンポーネントのカテゴリ値を (送信または変更) したい

入力ボックスでタイプを使用する場合、この値を別のコンポーネントに渡す必要があります

私はAngularの初心者でプロジェクトに取り組んでいますが、2つの異なるページに情報を表示することに問題があります.

プロファイルを表示する閲覧ページがあります。また、閲覧ページのコンテンツとその他のさまざまな情報を表示するホームページもあります。そのために、コンポーネント（browsePage）を作成し、コンポーネントをhome.view.htmlに追加しました

しかし、プロファイルは表示されません。

私の閲覧ページでは、プロファイルが表示されます。

私のコード:

app.config.js

home.controller.js

home.view.html

ブラウズ.コンポーネント.js

ブラウズ.controller.js

閲覧.view.html

index.html

コンソールにエラーは表示されません。GET エラーは無視してかまいません。

問題を解決するにはどうすればよいですか? 私は考え始めています 高度に感謝します。

$locationChangeStart イベントのハンドラー内で e.preventDefault を呼び出すと、奇妙な問題が発生します。私はこのようなものを持っています:

これは、ディレクティブの 1 つのリンク関数で発生します。問題は、何らかのパスでアンカー要素をクリックすると、実際にそこに移動してから戻ることです。Angular 1.5 のコンポーネント ルーターを使用しています。ユーザーが変更を保存せずにナビゲートする前に確認ダイアログを表示しようとしているため、これはほとんど役に立たなくなります。問題は、この再ナビゲーションにより、とにかくすべての変更が失われることです。何が起こっているのか分かりますか？

編集: ここでこの質問を再定式化しました: angular 1.5 コンポーネント、ui-router resolve、$onChanges ライフサイクル フック

私の質問を3つの連続した例で説明します.

最初のものでは、いわゆる外部コンポーネントがnameフィールドを持つmyDataオブジェクトを所有しています。このオブジェクトは、一方向バインディングを使用して内部コンポーネントに渡されます。外側のコンポーネントは、そのオブジェクトを更新するための 2 つのメソッドを公開します。nameフィールドの値を変更するmodifyと、それを新しいオブジェクトに置き換える replaceです。一方向バインディングは参照によって行われるため、modify が呼び出されると、内部コンポーネントに表示されるオブジェクトが更新されます。交換時が呼び出されると、一方向バインディングが参照の変更を監視し、$onChanges フックが呼び出されるため、内部コンポーネントに表示されるオブジェクトも更新されます。ここではすべて問題ありません:-)

2 つ目 ( https://plnkr.co/edit/uEp6L4LuWqTJhwn6uoTN?p=preview ) では、外側のコンポーネントはmyDataオブジェクトを宣言しなくなりましたが、ui-router コンポーネントの解決に由来する一方向バインディングとして受け取ります。ルーテッド状態。外側のコントローラー内で変更および置換メソッドが同じ方法で行われるため、すべてが前の例のように動作します。

3 番目の例 ( https://plnkr.co/edit/nr9fL9m7gD9k5vZtwLyM?p=preview ) では、 myData オブジェクトを所有し、modify メソッドと replace メソッドを公開するサービスが導入されています。ui-router 状態の解決は、サービスを呼び出してデータ オブジェクトを取得するようになりました。外側のコントローラーは、サービスの変更および置換メソッドを呼び出します。replaceメソッドへの最初の呼び出しまで、すべて問題ありません。サービス内のオブジェクトの参照が変更されたときに外部コンポーネントの $onChanges フックがトリガーされることを期待していましたが、そうではありません。

ここで何が間違っていますか？

精度:変更メソッドを使用すると問題なく動作します。ただし、コンポーネント内でバインドされたオブジェクトのローカル コピーを実行して、そこから元のオブジェクトを変更することを回避し (実際の一方向のデータ フローを確保)、$onChanges フックを使用してオブジェクトを通知できるようにしたいと考えています。変更（再割り当て）。

編集:解決でデータを取得するコンポーネントがサービスで変更をトリガーするコンポーネントではない、次のコード ( https://plnkr.co/edit/DZqgb4aIi09GWiblFcmR?p=preview )を思いつきました。問題は、解決されたデータ オブジェクトが再割り当てされたときに、コンシューマーコンポーネントで $onChanges フックがトリガーされないのはなぜですか? このコンポーネントに変更を通知するにはどうすればよいですか?

理想的には、消費者コンポーネントの $onChanges メソッドは次のように実装されます。

この場合、変更バージョンは機能せず (コンポーネントにはサービス データ オブジェクトへの参照がもうないため、予想どおり)、$onChanges フックがトリガーされないため (これが私の主な質問です!) 置換バージョンは機能しますどちらも動作しません..

次の例 ( plunker ) では、ui-router 状態は、データオブジェクトと、指定された値を使用してこのオブジェクトを新しいオブジェクトに置き換える replaceメソッドを持つアプリコンポーネントにルーティングされます。そのテンプレートには、次のものがあります。

• コールバック バインディング ('&') を介して置換メソッドをトリガーするエディターコンポーネント
• 一方向バインディング ('<') を介してデータオブジェクトを受け取り、$onChanges ライフサイクル フックがトリガーされたときにローカル コピーを作成し、オブジェクトの内容を表示する表示コンポーネント

すべてが正常に動作し、期待どおりです:-)

次の 2 番目の例 ( plunker ) に問題があります。appコンポーネントがデータ自体を管理しなくなったことを除いて、まったく同じ設定ですが、ui-router 状態の解決として定義された一方向バインディング ('<') を介してデータオブジェクトを受け取ります (コメントに見られるように、グローバル オブジェクトとメソッドの使用と、サービスを介した対話の両方をテストしました)。この解決されたオブジェクトが再割り当てされると、アプリコンポーネントの $onChanges フックがトリガーされることを期待していました (アプリ コンポーネントのデータ オブジェクトが再割り当てされるときの表示コンポーネントの場合と同様)。しかし、そうではありません。誰か説明がありますか？