導入后“mat-slide-toggle”不是已知元素

Question

我正在嘗試在已導入MatSlideToggleModule的組件中使用<mat-slide-toggle>Click me!</mat-slide-toggle> ，但我仍然收到消息，表明它不是已知元素。

角度版本：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 怎么可能不被識別？

Answer 1

正如丹尼爾建議的那樣，您需要將 MatSlideToggleModule 添加到@NgModule 中丟失的導出中。

但是，請注意編寫MatSlideToggleModule而不是MatSlideToogleModule 。

在 app.moudle.ts 中，添加：

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

在@NgModule 中，導入，添加：

MatSlideToggleModule 

Answer 2

嘗試將 MatSlideToogleModule 添加到您在 @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 { }