この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › フロントエンドフレーム › Angular 9シリーズ(3)は動的コンポーネントイベントをサブスクライブします
眺める： 15693|答える： 0

[角] Angular 9シリーズ(3)は動的コンポーネントイベントをサブスクライブします

[リンクをコピー]
掲載地 2020/06/02 17:20:01 | | | |
前節のレビュー

Angular 9シリーズ(1)動的負荷成分
https://www.itsvse.com/thread-9238-1-1.html

Angular 9系列(2)動的成分伝送パラメータ
https://www.itsvse.com/thread-9245-1-1.html

Angular 9シリーズ(3)は動的コンポーネントイベントをサブスクライブします
https://www.itsvse.com/thread-9246-1-1.html

Angular 9シリーズ(IV)カスタムパイプパイプライン
https://www.itsvse.com/thread-9248-1-1.html

Angular 9シリーズ(V)は金額通貨形式をフォーマットします
https://www.itsvse.com/thread-9249-1-1.html


この記事では、動的コンポーネントに対してイベントを支持すると、通常のコンポーネントは()でバインドできることがわかっていますが、動的に作成されたイベントをバインドした場合はどうなるのでしょうか? そしてコンポーネントから渡されるパラメータを受け入れます。

Modal1ComponentとModal2Componentのコンポーネントは、メインインターフェースで動的に作成するコンポーネントです。

Modal1Componentコンポーネントを修正して入力ボックスとボタンを追加しました。 子コンポーネントボタンをクリックすると、その値は親コンポーネントに戻され、親コンポーネントのインターフェースに表示されます。

まずレンダリングを見てみましょう。以下のように。




Modal1コンポーネント(動的に作成されたサブコンポーネント)関連コード

modal1.component.html



modal1.component.ts



インデックスコンポーネント(親コンポーネント)関連コード

index.component.html

index.component.ts



エラーが報告された場合:

「ngModel」は「input」の既知のプロパティではないため、バインドできません。

解決：

app.moduleに以下のコードを追加してください:




動的に作成されたコンポーネントのイベントにサブスクライブできるようになりました。

受信サブコンポーネントの値を考慮しない場合、HostListenerを使ってサブコンポーネントのイベントを受け取り、ボタンボタン名に従って適切に処理することもできます。

親コンポーネントindex.component.tsに以下のコードを追加します:

ここでのeは$event.targetを指しており、イベントのパラメータを取得する方法を知っていれば、この記事からのメッセージにも返信できます。



(終わり)




先の：Angular 9系列(2)動的成分伝送パラメータ
次に：文章を書くことができる記事出版システム

関連記事
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com