angularjs - 将自定义模块导入根模块不起作用

Question

我的根模块如下所示:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { routing, appRoutingProviders } from './app.routing';

import { LoginModule } from './login/login.module';
import { UserModule } from './user/user.module';
import { NavbarModule } from './navbar/navbar.module';

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

@NgModule({
  imports:      [ BrowserModule, routing, NavbarModule ],
  declarations: [ AppComponent ],
  providers:    [ appRoutingProviders ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

我正在编写一个导航栏，其中包含处理导航栏各个部分的各种组件(我只是想变得非常精细，有点像 Spotify 的方法)。

所以最终我将拥有很多组件，所有这些组件都加起来成为一个导航栏，这样感觉就像一个模块的非常自然的使用？所以我创建了一个导航栏模块:

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

import { NavbarComponent }  from './navbar.component';

@NgModule({
  imports:      [ ],
  declarations: [ NavbarComponent ],
  providers:    [  ],
  bootstrap:    [ NavbarComponent ]
})

export class NavbarModule { }

为了举例，我将坚持使用一个导航栏组件，如下所示

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

@Component({
  selector: 'navbar',
  templateUrl: './navbar.template.html'
})

export class NavbarComponent { }

html 模板仅包含标准引导导航栏代码...

正如您所看到的，我已将 NavbarModule 导入到 AppModule 中，根据我对模块工作方式的理解，这应该使 NavbarComponent 可用于我在 AppModule 中定义的所有组件？

所以当我使用 在我的 AppComponent html 模板中，它应该渲染出 NavbarComponent 的东西？相反，它只保留一个空的导航栏标签？

有什么想法吗？另外，如果我对模块及其导入的工作原理的理解完全错误，请您链接一些可以为我澄清这一点的 Material ？我已经阅读了 Angular 文档，这就是我目前的理解的来源。

谢谢

Answer 1

我发现了我的问题。在我的导航栏模块的元数据中，我没有导出导航栏组件，因此导入它的模块无法使用它!解决方案如下

导航栏.模块

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

import { NavbarComponent }  from './navbar.component';

@NgModule({
  imports:      [ ],
  declarations: [ NavbarComponent ],
  providers:    [  ],
  exports:      [ NavbarComponent ],
  bootstrap:    [ NavbarComponent ]
})

export class NavbarModule { }