web-dev-qa-db-ja.com

Angular素材： 'mat-dialog-content'は既知の要素ではありません

この質問を「重複する」とマークする前に、私がこの問題を抱えて何時間も立ち往生しているので、私を聞いてください。私は既存の質問を経験しましたが、解決策が見つかりませんでした。

私は学習Angular Angular 9 +およびAngular素材で始まりました。 公式ページ からドキュメントを読むことで、Angular素材の簡単なダイアログを実装しようとしています。

私のコードはコード例のコード例に従いますが、私はまだこのエラーメッセージを入手している理由を損なっています。

'mat-dialog-content' is not a known element.
'mat-dialog-actions' is not a known element.

ダイアログは表示されますが、No Angularマテリアルコンポーネント/ディレクティブは、ダイアログテンプレートHTMLではまったくレンダリングされています。 <button mat-button>Button</button>を使用していても、それは通常のボタンとしてレンダリングされ、Angular素材ボタンではありません。ダイアログテンプレートにいない他のすべてが完全にうまく機能します。私はここで何が悪いのかわかりませんが、誰かが私の間違いを引き出すことができれば、それは素晴らしいことだ！

app.module.ts :( MatDialogModuleをインポートしています）

...
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        MatDialogModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

mycomponent.ts：

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
...

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

    constructor(public dataDialogHandler: MatDialog) {}

    ngOnInit(): void {}

    public openDataDialog(): void {

        const dialogConfig = new MatDialogConfig();

        dialogConfig.data = {};

        this.dataDialogHandler.open(DataDialogComponent, dialogConfig);
    }
}

@Component({
    selector: 'data-dialog',
    templateUrl: './data-dialog.html'
})
export class DataDialogComponent {

    constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

export interface DialogData {}

data-dialog.html：

<h2 mat-dialog-title>some title</h2>
<mat-dialog-content>
    <p>dialog works</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>

そして最後に、my.component.htmlで：

<button mat-button (click)="openDataDialog()">View Dialog</button>

私はここで何をしていますか？前もって感謝します！

@angular/core 9.0.7
@angular/cdk 9.1.3
@angular/material 9.1.3
TypeScript 3.7.5
angulartypescriptangular-materialangular-components
7
Sajib Acharya

ダイアログコンポーネントとコンテナコンポーネントをさまざまなファイルに移動して、同じ問題を解決しました。現時点では、ダイアログとコンテナコンポーネントの両方が同じファイル内で宣言されている場所にあるこのセットアップがあります。

_# my.component.ts

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

    constructor(public dataDialogHandler: MatDialog) {}

    ngOnInit(): void {}

    public openDataDialog(): void {

        const dialogConfig = new MatDialogConfig();

        dialogConfig.data = {};

        this.dataDialogHandler.open(DataDialogComponent, dialogConfig);
    }
}

@Component({
    selector: 'data-dialog',
    templateUrl: './data-dialog.html'
})
export class DataDialogComponent {

    constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

export interface DialogData {}
_

コンポーネントを別々のファイルに分割します

私はあなたがこれに最後になるようにそれ自身の依存関係を処理する完全に新しいダイアログコンポーネントを作成することをお勧めします。

_# my.component.ts

import { Component} from '@angular/core';
import{ MatDialog } from '@angular/material/dialog';

# Make sure you import your newly created component
import{ MyDataDialog } from 'src/app/wherever-youve-put-it/my-data-dialog.component';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

    constructor(public dataDialogHandler: MatDialog) {}

    ngOnInit(): void {}

    public openDataDialog(): void {

        const dialogConfig = new MatDialogConfig();

        dialogConfig.data = {};

        this.dataDialogHandler.open(MyDataDialogComponent, dialogConfig);
    }
}
_

次に_ng generate component my-data-dialog_を使用して、ダイアログになるための新しいコンポーネントを作成します。その後、依存関係やコードをコピーすることができます（CLIを使用して新しい手作りコンポーネントにコピーするだけでなく、CLIを使用してコピーする場合は、参照などが間違っています。）

_# my-data-dialog.component.ts

import { Component, OnInit, Inject} from '@angular/core';
import{ MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
    selector: 'data-dialog',
    templateUrl: './data-dialog.html'
})
export class DataDialogComponent {

    constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

export interface DialogData {}
_
1
Peter Nixey

変更 mat-dialog-content と mat-dialog-actions属性へ。 NS：

<div mat-dialog-content>
    <p>dialog works</p>
</div>
<div mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Close</button>
</div>
 _
1
Danilo Mz