如何在子模块而不是AppModule中添加组件?

时间:2018-10-15 14:20:59

标签: angular

参考答案:Angular 5, using a component in a sub-module,但对我的问题没有帮助。

我在PagesModule下有一个子模块AppModule。我在PagesModule中导入了一个组件,如下所示:

@NgModule({
  imports: [
    PagesRoutingModule,
    ECommerceModule,
  ],
  declarations: [
    AdvertisementComponent,
  ],
  providers: [ModuleService],
})

组件:

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

  constructor() { }

  ngOnInit() {
  }

}

AppModule:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
  bootstrap: [AppComponent],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    {provide: HTTP_INTERCEPTORS, useClass: NbAuthJWTInterceptor, multi: true},
    AuthGuard,
  ],
})
export class AppModule {
}

AppRoutingModule:

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule' },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})

我正在使用AdvertismenetComponent模板中的ECommerceComponent选择器,该模板添加在ECommerceModule中的PagesModules中。

但是出现以下错误:

  

“ ngx-advertisement”不是已知元素:

2 个答案:

答案 0 :(得分:2)

如果要在其模块之外使用组件,则还需要将其导出。

@NgModule({
  imports: [
    PagesRoutingModule,
    ECommerceModule,
  ],
  declarations: [
    AdvertisementComponent,
  ],
  exports: [AdvertisementComponent],
  providers: [ModuleService],
})

答案 1 :(得分:0)

我认为更好的解决方案是共享模块。

AdvertisementModule

        string id = "5456454";
        foreach (ListItem item in dd1.Items)
        {
            if (item.Text.Contains(id))
            {
                dd1.Items.Remove(item);
            }
        }

并将其导入其他模块

这解决了两个问题:将组件包含在两个模块中以及元素未知的问题。

这最适合延迟加载。