오류 'mat-dialog-content'가 알려진 요소가 아닙니다.

오류 'mat-dialog-content'가 알려진 요소가 아닙니다.

각진 재료를 사용하여 로그인 양식을 작성하려고 합니다.사용 중@angular/material": "^7.3.0.

인app.module.ts저는 다음을 가져와서 가져오기 배열에도 넣었습니다.

import {
  MatToolbarModule, MatFormFieldModule, MatInputModule,
  MatOptionModule, MatSelectModule, MatIconModule, 
  MatButtonModule, MatCardModule, MatTableModule,
  MatDividerModule, MatSnackBarModule
} from '@angular/material';

인message.components.ts저는 다음을 가지고 있습니다.

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

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})

export class MessageComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<MessageComponent>, 
               @Inject(MAT_DIALOG_DATA) public data: any) {
          }
          public closeMe() {
            this.dialogRef.close();
          }
          ngOnInit() {
          }
        }

내 템플릿 message.component.html 내가 가지고 있는

<h1 mat-dialog-title>Message</h1>
<mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button (click)="closeMe()">Close</button>
</mat-dialog-actions>

mat-dialog-actions & mat-dialog-content에 대한 오류가 발생했습니다.

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

각 재료 설명서에 따라 두 가지 지침을 모두 사용할 수 있습니다.코드에서 무엇이 잘못되었을 수 있습니까?잘 부탁드립니다.

당신은 그것을 가져오는 것을 잊은 것 같습니다.MatDialogModule당신의 것AppModule(적어도 제공된 수입품 목록에는 표시되지 않습니다.)
나중에 참조할 수 있도록 API 설명서 탭의 첫 번째 줄에 가져올 모듈이 표시됩니다.

Jonathan 답변에 동의합니다. 샘플 코드가 있는 예제와 함께 전체 세부 정보를 추가합니다.

또한 오류와 관련된 문제도 해결됩니다. mat-dialog-proxy'는 알려진 요소가 아닙니다.

선언 및 app.module.ts의 구성 요소 항목에 DataDialogComponent를 추가합니다.

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


   @NgModule({
    declarations: [
       AppComponent,
       MatDialogModule
    ],
    imports: [
       BrowserModule,
       AppRoutingModule,
       BrowserAnimationsModule,
       ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
       LayoutModule,

    ],
    providers: [],
    entryComponents:[MatDialogModule],
    bootstrap: [AppComponent]
    })
export class AppModule { }

먼저, 당신은 그것을 가져왔는지 확인해야 합니다.MatDialogModule당신의 것AppModule.

다음 두 가지 작업을 모두 수행할 수 있습니다.

<div mat-dialog-content></div>
<div mat-dialog-actions></div>

또는

<mat-dialog-content></mat-dialog-content>
<mat-dialog-actions></mat-dialog-actions>

Angular Materials gitrepo에서 성분/src/material/dialog/dialog-module.ts의 원본을 보면 다음 지시사항을 내보냅니다.

import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogTitle,
} from './dialog-content-directives';

exports: [
    ...
    MatDialogClose,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    ...
  ]

~/dialog-content-directions.ts의 각 지시어에 대해 유사한 선언을 사용합니다.

@Directive({
  selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
  host: {'class': 'mat-dialog-content'}
})
export class MatDialogContent {}

문제가 지속되면 다음을 시도합니다.

npm cache clean --force

그런 다음 프로젝트를 다시 실행합니다.

대화 상자를 사용하는 모듈을 부모 모듈의 경로에 아직 추가하지 않았기 때문에 이 문제가 발생했습니다. (Import()를 사용하여 로드하는 중입니다.)

따라서 이 모듈은 앵글 앱의 일부가 아니었습니다. 왜냐하면 이 모듈은 아직 앱의 다른 모듈에서 가져오지 않았기 때문입니다.

코드 리팩터링을 할 때도 비슷한 오류가 발생했습니다.

중복 구성 요소(내 대화 상자를 두 곳에 붙여넣은 복사본) 때문에 문제가 발생했습니다.새 이름을 다른 이름으로 변경했는데 문제가 사라졌습니다.

ERROR in src/app/components/blah/result-dialog.html:2:1 - error NG8001: 'mat-dialog-content' is not a known element:
1. If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <mat-dialog-content >
  ~~~~~~~~~~~~~~~~~~~~~

app.module.ts 가져오기에 'MatDialogModule'을 추가한 다음 app.module.ts 선언에 만든 대화 상자 구성 요소를 추가했습니다!!이것으로 저는 그 문제를 해결했습니다.

나는 가져오기 모듈과 동일한 모듈에 대화 구성 요소를 등록하는 것을 잊었습니다.MatDialogModule

@NgModule({
  declarations: [
    //..
    DeleteConfirmDialog,  // << register your dialog component Here
  ],
  imports: [
    //..
    // material
    MatDialogModule // << also dont't forget this 
  ],
})

@브랜든 저는 당신이 이 문제를 해결했는지 확신할 수 없습니다. 제 연구 결과를 나열해 보세요.가져온 후에도 동일한 오류 문제가 발생했습니다. MatDialogModule결국 우리도 아래를 수입해야 한다는 것을 알게 되었는데, 정확한 오류가 발생하지 않은 것 같습니다. import { MatButtonModule } from '@angular/material/button';

Angular 7에서 11로 업데이트한 후 이제 모든 구성 요소에 app.module.ts뿐만 아니라 구성 요소 name.module.ts도 있습니다.

저는 그곳에서 MatDialogModule(그리고 더 보기 좋은 버튼을 위한 MatButtonModule)을 가져와야 했습니다!

언급URL : https://stackoverflow.com/questions/54576034/error-mat-dialog-content-is-not-a-known-element