Question

我在appmodule中添加了TaskdetailComponent。其选择器仅适用于其自身所在的组件。并且不能与其他模块的组件一起使用。得到这个错误 “如果'app-taskdetail'是Angular组件，则请验证它是否属于此模块。”

我正在使用Angular5。

Taskdetail Component
    @Component({
      selector: 'app-taskdetail',
      templateUrl: './taskdetail.component.html',
      styleUrls: ['./taskdetail.component.css']
    })
    export class TaskdetailComponent implements OnInit {

    App Module
    @NgModule({
      declarations: [
        AppComponent, DashboardComponent, ProjectdetailComponent, BoardComponent, TaskdetailComponent
      ],


      imports: [
        BrowserModule,
        ApproutingModule,
        RouterModule,
        MaterialModule,
        ProjectsModule,
        SettingsModule,
        TasksModule,
        UsersModule,
        HelperModule,
        SettingRoutingModule,
        HttpClientModule,
        ReactiveFormsModule,
        MatProgressSpinnerModule
      ],
      exports: [
        TasksModule
      ],

      providers: [AuthService, AuthGuardService, HelperService  , AttachmentService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: CustomHttpInterceptor,
          multi: true,
        },
      ],
      bootstrap: [AppComponent]
    })

    export class AppModule { }

Works with this component
@Component({
  selector: 'app-projectdetail',
  templateUrl: './projectdetail.component.html',
  styleUrls: ['./projectdetail.component.css'],
})
export class ProjectdetailComponent implements OnInit {


Not Working with this component
@Component({
  selector: 'app-addproject',
  templateUrl: './addproject.component.html',
  styleUrls: ['./addproject.component.css']
})
export class AddprojectComponent implements OnInit {

Answer 1

是的。实施时会出现错误，这就是原因。

您的ProjectdetailComponent和TaskdetailComponent在AppModule所在的模块中。但是对于一个您说它无效的是AddprojectComponent，它是在另一个似乎不了解TaskdetailComponent的模块中声明的。

因此错误是正确的。

您可以使用shared module，如果要在不同模块中使用这种组件，可以将其导入每个模块。

快速检查：在声明为TaskdetailComponent的模块中声明您的AddprojectComponent。错误将消失。这不是最好的解决方案。尝试将其与共享模块一起使用。

Answer 2

您只能声明一个组件一次。因此，您必须将组件放入共享模块

在应用程序的一个模块中声明这些类。如果它们属于该特定模块，则在模块中声明它们。 Angular doc

这里是我的文件树，向您显示：File tree

应用模块

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SharedModule } from './shared/shared.module';
import { ProjectDetailModule } from './projectdetail/projectdetail.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    ProjectDetailModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ProjectDetail模块（模拟另一个模块）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProjectdetailComponent } from './projectdetail.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
    declarations: [ProjectdetailComponent],
    imports: [
        CommonModule,
        SharedModule
    ],
    exports: [ProjectdetailComponent]
}) 
export class ProjectDetailModule {

}

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TaskdetailComponent } from '../taskdetail/taskdetail.component';

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

结果如下： Result

选择器仅适用于相同模块的组件

2 个答案: