MAT_DIALOG_DATA: Ошибка: inject () должен вызываться из контекста внедрения. Ошибка: inject () должен вызываться из контекста внедрения.

Question

Я сделал базовый c модальный диалог из учебников и немного застрял, загрузка моего проекта выдает мне эту ошибку:

ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at injectInjectorOnly (core.js:728)

Я не уверен, почему в сообщении об ошибке говорится нижний регистр-я inject () вместо заглавного @Inject, который я вызываю в конструкторе

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

@Component({
  selector: 'term-component',
  templateUrl: './term.component.html'
})
@NgModule({
  imports: [MatDialog, MatDialogRef, MatDialogConfig, MatDialogModule],
  providers: [{
    provide: MatDialog, useValue: {}
  }]
})

export class TermDialog implements OnInit {
  constructor(
    @Inject(MAT_DIALOG_DATA) private modalData: any,
    public dialogRef: MatDialogRef<TermDialog>
  ) {
    console.log(this.modalData);
  }

  ngOnInit() { alert(''); }

  actionFunction() {
    this.closeModal();
  }

  closeModal() {
    this.dialogRef.close();
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

, во всех аналогичных разделах справки говорится, что я использую заглавный-@ @ Inject вместо впрыска , что я и делаю. Тем не менее, я видел одно предложение импортировать Inject из «@ angular / core / testing» вместо «@ angular / core», что я не считаю возможным?

Любая помощь будет признательна, я » Вы никогда не застревали так много раз в проекте Hello World.

NEW:

хорошо, поэтому я думаю, что выполнил все 5 требований, но все еще вижу ту же ошибку. это мой app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatDialogModule } from '@angular/material/dialog';
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';

import { TermComponent } from './term.component';
import { TermDialog } from './term-dialog.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    TermComponent,
    LoginComponent,
    TermDialog
  ],
  imports: [
    AmplifyAngularModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    OverlayModule,
    MatDialogModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'term', component: TermComponent },
      { path: '**', component: LoginComponent }
    ])
  ],
  entryComponents: [
    TermDialog
  ],
  providers: [
    AmplifyService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

и мой файл term.component, который должен запускать диалоговое окно term

import { Component, NgModule } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TermService } from '../../services/term.service';
import { TermDialog } from './term-dialog.component';
import { compileNgModule } from '@angular/compiler';

@Component({
  selector: 'term-component',
  templateUrl: './term.component.html'
})
@NgModule({
  imports: [MatDialogModule],
  providers: [{ provide: MatDialog, useValue: {} 
  }]
})
export class TermComponent {
  clicked: boolean;
  success: boolean;

  constructor(public dialog: MatDialog, private termService: TermService) {

    this.clicked = false;
  }

  openAddNewTermDialog() {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.height = "350px";
    dialogConfig.width = "600px";
    dialogConfig.data = {
    };

    const dialogRef = this.dialog.open(TermDialog, dialogConfig);
    dialogRef.afterClosed().subscribe(result => {
      console.log('closed dialog');
      this.success = result;
    })
  }
}

Answer 1

Чтобы mat-dialog работал должным образом, мы должны выполнить следующие пункты:

# 1 Объявить компонент dialog в его соответствующем module.

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

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

# 2 Вызвать mat-dialog с переменной типа MatDialog из родительского компонента.

public dialog: MatDialog

# 3 Объявите dialogRef в компоненте диалога для доступа к его методам.

@Component({/* ... */})
export class YourDialog {
  constructor(public dialogRef: MatDialogRef<YourDialog>) { }

  closeDialog() {
    this.dialogRef.close('Pizza!');
  }
}

# 4 Объявите @Inject в компоненте диалога, если вы хотите передать некоторые данные из родительского элемента компонент к компоненту диалога.

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

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

# 5 Объявите компонент как entryComponents в определении module.

Ref - https://medium.com/@ppm1988 / matdialog-not-displaying-правильно-b3c4cf19ec4

Решение :

Я вижу, что вы позаботились о пунктах 3 & 4. Попробуйте исправить и другие точки.

Вы также можете добавить модуль animations, если вы этого еще не сделали.

Ссылка: MatDialog не показывает

Убедитесь, что приложение загружено с темой css.

Ссылка: Angular Диалог материала не будет отображаться правильно

Answer 2

Хорошо, получается, что ответом было просто не использовать MatDialogs, а просто вставить TermDialogComponent html в модальный диалог basi c с помощью тега селектора TermDialogComponent

Итак, я добавил html для модального диалога в моем term.component. html и просто вставил в

<term-dialog-component></term-dialog-component>

и все работало, как и предполагалось, без суеты, добавил модули / библиотеки вообще. Возможно, я никогда не узнаю, почему я не смог заставить базовый c модальный MatDialog работать должным образом, но я с этим согласился. Мой совет для тех, у кого такая же проблема: не использовать MatDialogs, это того не стоит, а также странные анимации вкладок в любом случае выглядят забавно.

спасибо всем за их ответы и время

Answer 3

Для TermDialog нет отдельного HTML. Это относится к шаблону и селектору TermComponent.

Live Demo

Я прокомментировал некоторые утверждения в демонстрационном коде, которые не имели отношения к решению.

Анимации Также добавьте BrowserAnimationsModule в app.module

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule],
  // ...
})

Ссылка: MatDialog не отображается

Тема Полагаю, вы также позаботились о материальной теме.

<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

Ссылка: Angular Диалог материала не будет отображаться правильно