Question

您好我正在开展Angular 2项目并使用材料模块。由于某种原因，我甚至无法将Stepper模块导入我的项目。所以我最终导入整个材料模块，如下所示：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { StepperComponent } from './stepper.component';
import { MaterialModule } from '@angular/material';


@NgModule({
  imports: [CommonModule, MaterialModule],
  declarations: [StepperComponent],
  exports: [StepperComponent]
})

export class StepperModule {}

我在我的html中使用它，如下所示，以测试其导入的

<mat-horizontal-stepper></mat-horizontal-stepper>

然后我收到以下错误，

polyfills.dll.js:24743 Unhandled Promise rejection: Template parse errors:
'mat-horizontal-stepper' is not a known element:
1. If 'mat-horizontal-stepper' is an Angular component, then verify that it is part of this module.
2. If 'mat-horizontal-stepper' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-horizontal-stepper></mat-horizontal-stepper>"): t@0:0 ; Zone: <root> ; Task: Promise.then ; Value:

我能够使用很多材料模块。只有这个问题。伙计们好吗？提前谢谢。

Answer 1

您确定要正确导入模块吗？请确保在app.module.ts中，导入到MatStepperModule和不 MaterialModule（已从2.0.0-beta.11中删除，请参阅{{3} }}）：

import { MatStepperModule } from '@angular/material';

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

它无效的原因是因为步进器组件是来自2.0.0-beta.11的新增内容（有关详细信息，请参阅here，如上所述，删除MaterialModule）

Answer 2

问题是，我使用了带有 Angular 材料的 Angular bootstrap。他们似乎不合作。这似乎是它对我从来没有用过的原因。

使用 mat-stepper 代替 mat-horizontal-stepper。

Answer 3

我也有这个问题。

我的原因是我正在阅读 Angular Material 12.1.1 的文档，该文档建议使用带有方向绑定的 export const namespaced = true; import Vue from "vue"; import Vuex from "vuex"; import { create } from "@/http/companies"; import VueToast from "vue-toast-notification"; import "vue-toast-notification/dist/theme-sugar.css"; import { getCompanies } from "@/http/companies"; // import { deleteCompanies } from "@/http/companies"; Vue.use(Vuex); Vue.use(VueToast); export const state = { companies: [], selectedCompanyId: "", }; export const getters = { allCompanies: (state) => state.companies, selectedCompanyId: (state) => state.selectedCompanyId, deletedCompanyId: (state) => state.deletedCompanyId, selectedCompany: (state) => state.companies.find((c) => c.id === state.selectedCompanyId), deletedCompany: (state) => state.companies.filter((c) => c.id != state.deletedCompanyId) }; export const mutations = { GET_COMPANIES(state, companies) { state.companies = companies; }, DELETE_COMPANIES(state, deletedCompanyId) { console.log("mutations:", deletedCompanyId) state.deletedCompanyId = deletedCompanyId; }, SET_SELECTED_COMPANY_ID(state, selectedCompanyId) { console.log(selectedCompanyId) state.selectedCompanyId = selectedCompanyId }, STORE_ID(state, payload) { state.routeId = payload; }, }; export const actions = { storeID({ commit }, payload) { commit("STORE_ID", payload); }, getCompanies({ commit }) { return getCompanies(NProgress.start()).then((response) => { commit("GET_COMPANIES", response.data); NProgress.done(); }); }, selectCompany({ commit }, companyId) { commit("SET_SELECTED_COMPANY_ID", companyId, NProgress.start()); console.log("đây là id", companyId) NProgress.done(); }, deleteCompany({ commit }, delId) { console.log("actions:", delId) return commit("DELETE_COMPANIES", delId); }, registerCompany({ commit }, companyInfor) { return create(companyInfor) .then(() => { Vue.$toast.open({ message: "Create company successfully!", type: "success", duration: 3000, dismissible: true, position: "top-right", }); }) .catch((error) => { commit(""); Vue.$toast.open({ message: error, type: "error", duration: 3000, dismissible: true, position: "top-right", }); }); }, }; 组件选择器。

在我的项目中，我实际上使用的是 Angular Material 9.2.4，它使用了旧组件 mat-stepper 选择器。

因此，请尝试根据文档的相关版本检查您正在使用的 Angular Material 版本，

Angular 2材料Stepper无法正常工作

3 个答案: