問題タブ [mat-dialog]

ユーザーが無効になっているアクションボタンをクリックしたときにダイアログが閉じないようにしたい。

図書館：

これはコードであり、動作することを期待していましたが、動作しません。ボタンは無効として表示されますが、ユーザーがクリックするとダイアログが閉じます。

どんなリードでも大歓迎です、ありがとう。

ダイアログ ボックスの背景に白色が表示されます。

TypeScript: config-referrals.component.ts

構築時に親からHTML文字列が提供されるMatDialogがあります。HTML 文字列は、名前付き div のコンテンツのソースであり<table>、html 内に埋め込まれたタグが含まれていますが、何らかの理由で、ダイアログの scss ファイルで定義されたテーブル スタイルが、私が指定した文字列に適用されません[innerHTML]。<table>html ファイルに直接ハードコードされています。

ダイアログ コンポーネントのスタイル テンプレートに含まれるスタイルを使用して、ダイアログに innerHTML をレンダリングさせる方法はありますか?

HTML:

SCSS:

これは私のhtmlファイルです。

html ファイルには、2 つのアンカー タグがあります。1 つは編集用で、もう 1 つは詳細オプションの表示用です。どちらも他の編集および表示コンポーネントにリダイレクトされています。しかし、代わりに、マット ダイアログ ポップアップに編集および表示オプションを表示したいと考えています。助けてください。

これは私のtsファイルです

これは、ユーザーの詳細を追加、編集、および表示するために、アプリ ルーティング モジュールでそれぞれ指定されたルーティングです。

最後に、これはサービスファイルです

実際、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