时间戳

首页 > 解决方案 > Angular 看不到我的组件的选择器

javascript - Angular 看不到我的组件的选择器

问题描述

我已经创建了组件（滑块），但在另一个文件（主页）中看不到他。

如果 'app-slider' 是一个 Angular 组件，那么验证它是这个模块的一部分。

slider.component.ts 我的app-slider选择器在哪里

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

components.module.tsdeclatations/export我 所在的模块SliderComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SliderComponent } from './slider/slider.component';

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

    @NgModule({
      imports: [
        CommonModule,
        SharedModule.forRoot()
      ],
      declarations: [SliderComponent],
      exports: [SliderComponent]
    
    })
    export class ComponentsModule { }

我使用的 main-page.component.html<app-slider></app-slider>

<div class="content">
    <section class="main">
        <div class="container">
            <app-slider></app-slider>
            ....

我的PagesModuleMainPageComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

import { MainPageComponent } from './main-page/main-page.component';




@NgModule({
  imports: [
    CommonModule,
    SharedModule.forRoot()
  ],
  declarations: [MainPageComponent],

})
export class PagesModule { }

带有两个模块的App.module.ts

import { ComponentsModule } from './components/components.module';
import { PagesModule } from './routes/pages/pages.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    ComponentsModule,
    PagesModule,
...

UPD 1
我已经删除和ComponentsModule导入，但问题是一样的。请检查链接PagesModuleApp.modulesComponentsModulePagesModule

页面模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

import { ComponentsModule } from '../../components/components.module';
import { MainPageComponent } from './main-page/main-page.component';


    @NgModule({
      imports: [
        CommonModule,
        ComponentsModule,
        SharedModule.forRoot()
      ],
      declarations: [MainPageComponent],
    
    })
    export class PagesModule { }

更新后的 App.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { RoutesModule } from './routes/routes.module';
import { SharedModule } from './shared/shared.module';
import { LayoutModule } from './layout/layout.module';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    LayoutModule,
    RoutesModule,
    SharedModule.forRoot(),
    CoreModule,
    BrowserModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： javascriptangular

解决方案

您ComponentsModule不应在应用程序的根模块 ( AppModule) 中导入，而应在实际使用它的模块中导入。在您的情况下，PagesModule应该导入 ComponentsModule.

AppModule在导入的模块中声明时（通过注入器机制），只有服务对整个应用程序可用。

推荐阅读