問題タブ [angular2-components]

私はこの答えに従おうとしましたが、兄弟コンポーネント間のAngular 2イベントキャッチがあまりにも混乱しています

子コンポーネント 2で何かがクリックされたときに、子コンポーネント 1のメソッドを呼び出したい

子コンポーネント 2 は、trackClick というイベントを発行します。

親コンポーネント:

子コンポーネント 1 (オーディオ プレーヤー)

子コンポーネント 2 (オーディオ アルバム)

私はAngular2 RC5で作業しています。ラベルと入力をカプセル化するコンポーネントがあります

次のように任意のテンプレートから呼び出されます<my-input id="inputcontrol">input</my-input> 問題は、ラベルをクリックすると入力がフォーカスされないことですが、ブラウザーで開発ツールを確認すると、 for 属性と id 属性の両方が正しく設定されています

ここに問題を示すプランカーがあります: https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n

Plunkr やろうとしていることへのリンク -> https://plnkr.co/edit/mC8jGYROlpqFpnjTCQKr?p=preview

私の目標は、ツール メニューからステージの左側に何かをドラッグできるようにすることです。「ドロップ」すると、選択したアイテムがステージ内にネストされます。

ドキュメントとブログを検索しました。「CreateEmbeddedView」が私が使用することになっているもののように見えることがわかりました。

Angular2のドキュメントによると、私が探しているのは次のとおりです。

createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number) : EmbeddedViewRef

ただし、これの実用的な例を見つけることができないようです。私が使用することに頼ったのは、「src/designer-droppable.directive.ts」の次のとおりです。

ただし、これはコンポーネントを埋め込むのではなく、兄弟として「viewContainerRef」に追加します。つまり、plnkr で何かをステージにドラッグすると、埋め込まれずにステージの右側に追加されます。

CreateEmbeddedView を使用しようとしましたが、TemplateRef を動的に定義する方法がわかりません。

私は Dynamic Component Loader に関する多くの古いドキュメントを見てきましたが、それはその後ファクトリを支持して廃止されました。私が欠けているものへの支援は素晴らしいでしょう。ライブの例は素晴らしいでしょう。

ありがとうございました。

angular2 でプロジェクトを開始しましたが、何らかの理由でルートにコンポーネントが 2 回表示されます。関連するコード スニペットを次に示します。

app.routing.ts

app.module.ts

app.component.htmlが含まれています<app-auth></app-auth>

auth.component.ts

auth.component.html

ここで何が欠けていますか？

Angularjs 2チュートリアルには、TypeScript でコンポーネントの入力変数を設定する方法が説明されています

javascipt のドキュメントがまだ利用できないため、javascript を介してコンポーネント変数を設定することに行き詰まっています。ヒーロー変数を入力として受け取るコンポーネントのコードを次に示します。どうすれば設定できますか?

コンポーネントを使用する<hero-detail [hero]="selectedHero"></hero-detail> プロパティheroが設定されていないため、ブラウザで次のエラーが発生します Can't bind to 'hero' since it isn't a known property of 'hero-detail'

CSS トランジション プロパティを使用して、3 秒間隔で幅を 0 ～ 100 に増やしたい div があります。Chrome 開発者ツールでこのプロパティを変更すると、3 秒間で 0 から 100 まで大きくなります。ただし、コンポーネントの からスタイルを適用すると、ngOnInit()すぐに適用されます。私は何か間違ったことをしていますか？

編集:私は自分で問題を解決しましたが、それが機能する理由も説明する答えは素晴らしいでしょう.

Component.ts:

Component.html:

コンポーネントでhtmlの相対パスを使用しようとしていますが、jsファイルをdistフォルダーにマッピングしています..私のコンポーネントコードは

app/app.component.ts

html ファイルは同じディレクトリにあります。つまり、app/app.component.html です。

次のエラーが表示されます

angularが「dist/app/app.component.html」でapp.component.htmlファイルを見つけていることは完全に明らかですが、そこにはありません。これを修正するにはどうすればよいですか??

私のsystemjs.config.jsファイルは

そして私の tsconfig.json は

<input ...>カスタム ディレクティブが角度のあるフォーム内にある場合、テンプレートにタグを含むカスタム ディレクティブに問題があります。

フォーム内で入力を宣言する場合、入力のフィールドを編集すると、フォームのプロパティ (pristine、touched、valid など) が期待どおりに変更されます。

たとえば、フォーム内でカスタム ディレクティブを宣言し、その<ac2-string-input ...></ac2-string-input>テンプレートに入力が含まれている場合、この入力のフィールドを編集しても、フォームのプロパティは変更されません。

何故ですか？それはバグですか？これに対する回避策はありますか?

以下に例を示します。

app/form.component.tsにフォーム コンポーネントを含めることができます。

テンプレート付きtemplates/form/form.html

また、ac2-string-inputディレクティブはapp/form/input.component.tsで定義されています。

テンプレート付きtemplates/form/input.html

フォームをロードすると、2 つのテキスト フィールドがあり、フォームは「元の状態」になります。

「attr2」フィールドを編集すると、フィールドがフォームにバインドされていないかのように、フォームは元のままになります。

「attr1」フィールドを編集すると、期待どおりにフォームがきれいになりません。