导入后，“mat-slide-toggle”不是已知元素。

Question

我正在尝试在已经导入MatSlideToggleModule的组件中使用<mat-slide-toggle>Click me!</mat-slide-toggle>，但我仍然收到“未知元素”的消息。

Angular版本：8.0.1

HTML页面（slide-page.html）

<div class="grid-slide-toggle-material"> 
  <mat-slide-toggle>Click me!</mat-slide-toggle>
</div>

模块 (slide-page.module.ts)

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ]
})
export class SlidePageModule { }

即使在项目模块中导入了HTML，为什么HTML仍然不能被识别？

- MattDAVM

---

我遇到了这个错误，然后发现我的组件在 app.module 中被声明了，尽管它应该在名为“admin”的子模块中。不知道它是怎么到那里的。修复声明问题解决了这个问题。 - O-9

请考虑选择被接受的答案 @MattDAVM - Hila Grossbard

Answer 1

正如Daniel建议的那样，您需要将MatSlideToggleModule添加到@ NgModule中缺少的导出项中。

但是，请注意要写正确的MatSlideToggleModule而不是MatSlideToogleModule。

在app.module.ts中添加：

`import { MatSlideToggleModule } from '@angular/material/slide-toggle'`

在 @NgModule 内，导入中添加：

MatSlideToggleModule 

- Hila Grossbard

Answer 2

尝试将MatSlideToggleModule添加到@ NgModule中的缺失导出中。

再提供一个想法。您在哪里声明了组件？假设您的组件正在调用slidePageComponent。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SlidePageComponent } from './component/slide-page.component'

@NgModule({
  declarations: [
  SlidePageComponent
],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ],
exports: [
    MatSlideToggleModule 
]
})
export class SlidePageModule { }

- Daniel Vágner

---

尝试了一下，仍然收到“不是已知元素”的错误。 - MattDAVM

我编辑了我的示例。请查找声明 - 您在 slide-page-component.ts 的导入声明中遗漏了。这只是一个示例，您的文件路径可能不同。 如果有帮助，请告诉我。 - Daniel Vágner