問題タブ [ng-container]

質問する

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.

65 問題
Newest
Active
Bountied
318
Unanswered
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