問題タブ [angular2-components]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - Angular 2 HTMLのコンストラクターに変数を渡す
アプリ全体で再利用するコンポーネントを作成しています。以下の重要なコードです
.ts
.html
私はHTMLテンプレートでこれらのオブジェクトを作成しています
HTMLタグにコンストラクタ変数を入力するにはどうすればよいですか? 私の人生では、それを行う方法に関する適切な参照が見つかりません。
typescript - 関連ファイルを使用して入力フォームデータを割り当て/追加し、サーバーAngular 2にアップロードします
angular 2は初めてです。ファイルがアップロード/選択されたときに多数のファイル名をリストするフォーム入力テーブルがあります。各ファイルのデータを入力した後、選択したファイルにそれぞれのフォーム データを割り当て/追加し、サーバーに送信したいと考えています。
- それぞれのファイルをそのフォーム データに割り当てる/追加するにはどうすればよいですか?
- これらのファイルとそれぞれのフォーム データをサーバーに送信するにはどうすればよいですか?
以下は私のコードです。どんな助けや解決策も本当に感謝しています。ありがとう。
テンプレート
成分
angular - インライン テンプレートを使用したコンポーネントのトランスクルード
私は Angular 2-rc3 を使用しており、Component
トランスクルージョンを少し異なる方法で適用したいと考えています。ここに私のコンポーネントがあります:
そして、私はそれを次のように使用します:
ご覧のとおり、コンポーネントで使用されるインライン テンプレートを定義しようとしています。今、これはひどく間違っています。まず、それを言うデータバインディング例外can't read property 'make' of undefined
。item.make
ではなく、周囲のコンポーネントから読み取ろうとしていMyListComponent
ます。しかし、今のところこれを一時的に無効にしても:
次に、2 番目の問題が表示されます。
したがって、Angular は 内で使用するためにテンプレートを実際にコピーするのではなく*ngFor
、要素をバインドするだけで、最終的に最後のアイテムに関連付けられます。
これを機能させるにはどうすればよいですか?
AngularJS でも同じ問題がありました。petebacondarwin が compile を介して DOM を操作するソリューションを投稿しましたが、これは素晴らしいことでした。コンポーネントに注入することで、Angular 2でもこのオプションを使用できますElementRef
が、! 大きな違いの 1 つは、AngularJS ではデータバインディングの前にオフになったことです。つまり、テンプレートでのcompile
使用に問題はありませんでした。{{item.make}}
Angular 2 では、{{item}}
事前に解析されているため、これは問題ないようです。では、これについて最善の方法は何ですか?わずかに異なる表記[[item]]
と文字列を使用して全体を置き換えることは、最もエレガントな方法とは思えません...
前もって感謝します!
// 編集:問題を再現するPlnkrを次に示します。
angular - APIがすべての情報をロードするまでオブザーバブルを待っていますAngular2
私は読み込みコンポーネントで作業して、コンテンツが呼び出されて API から読み込まれるまでの間、フレンドリーな待機を行いました。テキストのみの場合は問題ありませんが、情報に画像やその他の情報が含まれている場合、コンテンツが完全に読み込まれる前に読み込みコンポーネントが消えます。
Angular2 のライフサイクル フックを調べましたが、いずれも私の要件に適合しているように見えます。
主に私のコンポーネントは、いつ isLoading = true が消えなければならないかを理解しています。
これが私がそれをやろうとした私の方法です。
angular - Angular2 ビューの更新されたライフサイクル フックはありますか?
親からデータを受け取り、div にテキストを表示する子コンポーネントがあります。親undefined
がデータとして送信することは可能です。そうするとき、divはその高さを0に移行することになっています。これは、cssトランジションを介して行います。テキストの長さがわからないので、div の高さを に移行することになっていますauto
。これを行っているコード サンプルを見つけて、コンポーネントに適合するように変換しました。
ここでの問題は、ngOnChange が呼び出されると、プロパティ言語が実際に変更されましたが、ビューはバインドされており、ngOnChange 関数内で割り当てられたthis.shownLanguage
ときに実際には更新されません。それ自体this.language
へのバインディングについても同様です。this.language
OnChange イベントが発生するのが早すぎます。div にテキストがないため、正しい高さを取得できないため、計算が正しく実行されません。ビューが変更されたときにトリガーされるイベントは実際にありますか、それともビューを強制的に再描画して正しい高さの div を実際に取得できるようにする方法はありますか?
angular - Rendererを使用してAngular2でDOMを操作する効率的な方法は何ですか?
Angular2 Renderer には、textContent、innerHTML、getAttribute などの DOM からデータを抽出するための API がないことに気付きました。@ViewChild
JS DOM API を使用して従来の方法で変更できるターゲット要素も保持しますが、WebWorker やネイティブ アプリなどの他の環境には推奨されません。
次の例では、各単語をスパンでラップしています。私はそれを適切に行っていますか、それとも改善できますか?