Question

我的root模块看起来像这样：

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＆＃39的方法）。

所以最后我会有很多组件加起来一次导航栏，所以感觉就像一个模块的自然使用？所以我创建了一个导航栏模块：

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模板只包含标准的bootstrap导航条代码......

因为你可以看到我已经将NavbarModule导入到AppModule中，根据我对模块如何工作的理解，应该让NavbarComponent可用于我在AppModule中定义的所有组件？

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

有什么想法吗？此外，如果我对模块及其导入工作原理的理解完全没有，请您链接一些可以为我澄清这些内容的材料吗？我已经阅读了角度文档，这是我从目前的理解中获得的。

由于

Answer 1

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

下面的解决方案

navbar.module

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 { }

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

1 个答案: