Angular 在另一个模块中使用共享模块组件答案

【问题标题】：Angular use Shared Modules Component in another moduleAngular 在另一个模块中使用共享模块组件
【发布时间】：2022-01-02 16:58:59
【问题描述】：

作为一个结构，我有一个共享文件夹，里面有一个 shared.module.ts。而且我还有模块文件夹，里面有模块，其中之一是 Dashboard.module.ts。我在共享模块中编写了一个自定义侧边栏菜单，我将在我的仪表板模块中使用它。这是我的 shared.module.ts

import {  NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header-component/header-component.component';
import { LoaderComponent } from './components/loader/loader.component';
import { ModalComponent } from './components/modal/modal.component';
import { SidebarMenuComponent } from './components/sidebar-menu/sidebar-menu.component';
import { WidgetComponent } from './components/widget/widget.component';
import { BarChartComponent } from './components/bar-chart/bar-chart.component';
import { SliderComponent } from './components/slider/slider.component';
import { RightBarComponent } from './components/right-bar/right-bar.component';



@NgModule({
  declarations: [
    HeaderComponent,
    LoaderComponent,
    ModalComponent,
    SidebarMenuComponent,
    WidgetComponent,
    BarChartComponent,
    SliderComponent,
    RightBarComponent
    
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports:[HeaderComponent,LoaderComponent,ModalComponent,SidebarMenuComponent,RightBarComponent]
})
export class SharedModule { }

RightBarComponent 组件是我要使用的组件。我都在声明和导出中写了它。在仪表板模块中，我编写了一个组件，它是我编写的 html 中的仪表板组件

<app-right-bar></app-right-bar>

但它在下面给出了错误

Error: src/app/modules/dashboard/pages/dashboard/dashboard.component.html:2:1
错误 NG8001：'app-right-bar' 不是已知元素：

如果“app-right-bar”是一个 Angular 组件，则验证它是该模块的一部分。

如果“app-right-bar”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

这是我的dashboard.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';



@NgModule({
  declarations: [
    DashboardComponent
    
  ],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ],
})
export class DashboardModule { }

这是我的 right-bar.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

我的失踪在哪里？提前致谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您缺少的是您错过了将共享模块导入您的仪表板模块

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';



@NgModule({
  declarations: [
    DashboardComponent
    
  ],
  imports: [
    CommonModule,
    SharedModule,
    DashboardRoutingModule
  ],
})
export class DashboardModule { }

【讨论】：