問題タブ [angular2-components]

アプリ全体で再利用するコンポーネントを作成しています。以下の重要なコードです

.ts

.html

私はHTMLテンプレートでこれらのオブジェクトを作成しています

HTMLタグにコンストラクタ変数を入力するにはどうすればよいですか? 私の人生では、それを行う方法に関する適切な参照が見つかりません。

angular 2は初めてです。ファイルがアップロード/選択されたときに多数のファイル名をリストするフォーム入力テーブルがあります。各ファイルのデータを入力した後、選択したファイルにそれぞれのフォーム データを割り当て/追加し、サーバーに送信したいと考えています。

1. それぞれのファイルをそのフォーム データに割り当てる/追加するにはどうすればよいですか?
2. これらのファイルとそれぞれのフォーム データをサーバーに送信するにはどうすればよいですか?

以下は私のコードです。どんな助けや解決策も本当に感謝しています。ありがとう。

テンプレート

成分

私は 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を次に示します。

私は読み込みコンポーネントで作業して、コンテンツが呼び出されて API から読み込まれるまでの間、フレンドリーな待機を行いました。テキストのみの場合は問題ありませんが、情報に画像やその他の情報が含まれている場合、コンテンツが完全に読み込まれる前に読み込みコンポーネントが消えます。

Angular2 のライフサイクル フックを調べましたが、いずれも私の要件に適合しているように見えます。

主に私のコンポーネントは、いつ isLoading = true が消えなければならないかを理解しています。

これが私がそれをやろうとした私の方法です。

親からデータを受け取り、div にテキストを表示する子コンポーネントがあります。親undefinedがデータとして送信することは可能です。そうするとき、divはその高さを0に移行することになっています。これは、cssトランジションを介して行います。テキストの長さがわからないので、div の高さを に移行することになっていますauto。これを行っているコード サンプルを見つけて、コンポーネントに適合するように変換しました。

ここでの問題は、ngOnChange が呼び出されると、プロパティ言語が実際に変更されましたが、ビューはバインドされており、ngOnChange 関数内で割り当てられたthis.shownLanguageときに実際には更新されません。それ自体this.languageへのバインディングについても同様です。this.languageOnChange イベントが発生するのが早すぎます。div にテキストがないため、正しい高さを取得できないため、計算が正しく実行されません。ビューが変更されたときにトリガーされるイベントは実際にありますか、それともビューを強制的に再描画して正しい高さの div を実際に取得できるようにする方法はありますか?

Angular2 Renderer には、textContent、innerHTML、getAttribute などの DOM からデータを抽出するための API がないことに気付きました。@ViewChildJS DOM API を使用して従来の方法で変更できるターゲット要素も保持しますが、WebWorker やネイティブ アプリなどの他の環境には推奨されません。

次の例では、各単語をスパンでラップしています。私はそれを適切に行っていますか、それとも改善できますか?