Question

在我的 Angular-11 项目中，我在 SharedModule 中有这个

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';

const MaterialComponents = [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    PortalModule,
    ScrollingModule
]

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MaterialComponents,
    FormsModule,
    RouterModule
  ],
  exports: [
    MaterialComponents
  ]
})
export class SharedModule { }

然后，在 AuthModule 中，我有：

import { SharedModule } from '../../shared/shared.module';

@NgModule({
  declarations: [
    AuthComponent,
    LoginContactAdminComponent,
    SignupComponent,
    LoginComponent,
    LoginResetResponseComponent,
    SignupCompanyComponent,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    AppInputModule,
    ErrorModule,
    ReactiveComponentModule
  ],
  imports: [
    CommonModule,
    SharedModule,
    CoreModule,
    AuthRoutingModule
  ]
})
export class AuthModule { }

在 AuthModule 中，我也有这个组件 SignupCompany 和这个代码：

注册组件.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-signup-company',
  templateUrl: './signup-company.component.html',
  styleUrls: ['./signup-company.component.scss']
})
export class SignupCompanyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
 }
}

注册组件.html：

    <mat-horizontal-stepper linear #stepper>

      <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        <p>You are now done.</p>
        <div class="card-footer">
          <button mat-button matStepperPrevious>Back</button>
          <button mat-raised-button color="primary">Save and Proceed</button>
        </div>
      </mat-step>          
    </mat-horizontal-stepper>

但是我出现了这个错误：

<块引用>

错误：src/app/auth/pages/signup-company/signup-company.component.html:11:9 - 错误 NG8001：'mat-horizontal-stepper' 不是已知元素：

如果“mat-horizontal-stepper”是一个 Angular 组件，则验证它是否是该模块的一部分。
如果“mat-horizontal-stepper”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

<块引用>

11 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/auth/pages/signup-company/signup-company.component.ts:5:16 5 templateUrl: './signup-company.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件 SignupCompanyComponent 的模板出错。

<块引用>

错误：src/app/auth/pages/signup-company/signup-company.component.html:13:11 - 错误 NG8001：'mat-step' 不是已知元素：

如果“mat-step”是一个 Angular 组件，则验证它是否是此模块的一部分。
如果“mat-step”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

<块引用>

13 ~~~~~~~~~~

src/app/auth/pages/signup-company/signup-company.component.ts0m:5:16 5 templateUrl: './signup-company.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件 SignupCompanyComponent 的模板出错。

我该如何解决？

谢谢

Answer 1

我都试过了，但这个解决方案有效：

使用 mat-vertical-stepper 具有与 mat-stepper 相同的属性，您可以选择垂直或水平。

Answer 2

尝试在共享模块中的 Material 组件中导出。

在您的exports: [...MaterialComponents]

{{1}}

Angular - 错误 NG8001：'mat-step' 不是已知元素

2 个答案: