Question

我有一个Component x及其相关的html和scss文件，但我想用自己的模块将其隔离出来。但是，如果我尝试在应用程序中的任何地方引用它，则无法使用在我的新组件中定义的选择器。我的理解是，我可以创建一个新模块并将其导入到我的app.module中，它将有效地充当原始app.module：

目前，我在编辑器中看到一条纸条告诉我：

组件'XComponent'不包含在模块中，并且在模板内部不可用。考虑将其添加到NgModule声明中。

但是，这就是我的印象，我是通过将其从新模块中导出并将该模块导入到app.module中来实现的。

x.component.ts

import {
  Component,
  ViewEncapsulation,
  ElementRef,
  Input,
  OnInit,
  OnDestroy,
} from '@angular/core';

import { XService } from './x.service';

@Component({
  selector: 'app-x',
  templateUrl: 'x.component.html',
  styleUrls: ['x.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class XComponent implements OnInit, OnDestroy {
  @Input() id: string;
  private element: any;

  constructor(private xService: XService, private el: ElementRef) {
  }

  ngOnInit(): void {

    }
}

x.service.ts

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class XService {

}

x.module.ts

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

import { XComponent } from './x.component';

@NgModule({
  imports: [CommonModule],
  declarations: [XComponent],
  exports: [XComponent],
})
export class XModule {}

最后我将新模块导入app.module.ts

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './core/header/header.component';
import { DashboardComponent } from './dashboard/dashboard.component';


import { Routes, RouterModule } from '@angular/router';

import { XModule } from './shared/x';

const epRoutes: Routes = [
  { path: '', component: DashboardComponent },
];
@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    HeaderComponent,
  ],
  imports: [BrowserModule, RouterModule.forRoot(epRoutes), XModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

任何指针将不胜感激。预先感谢。

Angular 9组件无法在模块中识别

0 个答案: