問題タブ [ng-component-outlet]

質問する

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.

16 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
166 参照

javascript - Angular 2、動的コンポーネントのサブコンポーネントはレンダリングされません

私はこの方法を使用しています

あるコンポーネントを別のコンポーネントに挿入します。私の場合はフォームをサイドバーに挿入します。ただし、注入されたコンポーネント (フォーム) からは、アプリケーションのパイプと共有コンポーネントを使用できません。shared.module に存在するコンポーネントまたはパイプは、注入されたコンポーネント内で認識されません。ngComponentOutlet を介して注入されたコンポーネントで共有コンポーネントを利用できるようにするにはどうすればよいですか?

私はそれをしましたが、コンポーネントファクトリangular-comp-factoryを使用して実行しました。しかし、実際には別の質問があります。私のコンポーネントはレンダリングされていますが、そのサブコンポーネントはありません。コンポーネント ファクトリを使用してサブコンポーネントをレンダリングするにはどうすればよいですか?

0 投票する
1 に答える
660 参照

javascript - Angular Higher Order Components (HOC)でhtml要素を子として渡す方法は?

Angular Higher Order Component で HTML 要素を渡したいです。現在、子要素を @Input デコレータとして渡しています。私のHOC、メインコンテナはこんな感じです。

他のコンポーネントでは、このように HOC を使用しています

私の現在のコード:

.ts ファイルで、このように子コンポーネントを渡しています

今私がやりたいのは、React形式でこのようなものです

0 投票する
1 に答える
86 参照

angular - Angular 11+ MatDialog: 内部コンポーネントの (ngComponentOutlet) html がトリガーされない

実際、MatDialog 内の ngComponentOutlet 埋め込みコンポーネントでさらに問題が発生しています。しかし、ここから始めましょう。

私が構築しているもの

MatDialog 内に任意のコンポーネントを表示したい。私は方法を見つけましたが、Angular 9 (私が書いた例を見つけたバージョン) で動作しますが、Angular 11 (私のプロジェクトが基づいているバージョン) や Angular 13 (@latest ）。

観察

  • 内部 HTML に a が含まれて<button (click)="close()">Close</button>いてボタンをクリックすると、内部コンポーネントのclose()メソッドがトリガーされない
  • の代わりにイベントclose()にバインドすると、メソッドがトリガーされます。おそらく他のイベントでも機能しますが、(mousedown)(click)(click)
  • ボタンをクリックすると、代わりに内部コンポーネントがリロードされます (例のコンソール ログを参照)
  • ダイアログのどこかをクリックすると、内部コンポーネントがリロードされます (例のコンソール ログを参照)。Angular 9 では発生しません

Angular 9 にはこの問題はありません。以下の両方の例でまったく同じアプリ コードを使用しています (両方のプロジェクトは で作成されng new、異なるngバージョンを使用しています)。

再現例

( stackblitz は病気です。500 秒をくしゃみした場合は、数回再試行してください。おそらく covid... )

壊れた例 (Angular 11)

作業例 (Angular 9)

  • Angular 9 の例では、MatDialog は期待どおりに機能します
  • Angular 11 の例では、MatDialog が期待どおりに機能しません
  • Angular 13 (@latest) を試しましたが、問題は解決しません

質問

  1. なぜこうなった？
  2. どうすればこれを回避できますか?

RAW ファイル FFR

app.module.ts

app.component.ts

my-dialog.service.ts


12345678910