Angular4 多模块问题
Angular4 multiple modules issue
我有一个应用程序有多个视图,如导航和页面。所以我添加了一个布局模块并将该模块导入到主模块中,现在尝试在应用程序组件中使用布局模块导航组件。所以这应该显示 navigation.html 内容,但它是空白的。它也没有给出任何错误。不确定我做错了什么。下面是我的代码,可以给出正确的图片:
这里是 app.model.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LayoutsModule } from './layouts/index';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这里是 LayoutsModule
import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation/navigation.component';
@NgModule({
declarations: [
NavigationComponent
],
exports: [
],
imports: [
],
providers: [
]
})
export class LayoutsModule {}
和我的app.component.html
<app-navigation></app-navigation>
<router-outlet></router-outlet>
您需要在您的 LayoutModule
中导出要提供给其他模块的组件:
import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation/navigation.component';
@NgModule({
declarations: [
NavigationComponent,
],
exports: [
NavigationComponent,
],
imports: [
],
providers: [
]
})
export class LayoutsModule {}
有关共享模块的更多信息:https://angular.io/guide/sharing-ngmodules
您应该从 LayoutsModule
中导出 NavigationComponent
,以便它可以在 LayoutsModule
中使用。基本上,无论你想公开给 Angular 中的另一个模块/系统使用什么,你都必须将那些 component
/directive
/pipe
放在 exports
元数据中NgModule
的选项或者更确切地说,它可以通过 Angular 路由器的 route
段加载。
@NgModule({
declarations: [
NavigationComponent
],
exports: [
NavigationComponent
],
imports: [],
providers: []
})
export class LayoutsModule {}
不确定为什么没有收到错误。它应该会引发错误。
我有一个应用程序有多个视图,如导航和页面。所以我添加了一个布局模块并将该模块导入到主模块中,现在尝试在应用程序组件中使用布局模块导航组件。所以这应该显示 navigation.html 内容,但它是空白的。它也没有给出任何错误。不确定我做错了什么。下面是我的代码,可以给出正确的图片: 这里是 app.model.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LayoutsModule } from './layouts/index'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, LayoutsModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
这里是 LayoutsModule
import { NgModule } from '@angular/core'; import { NavigationComponent } from './navigation/navigation.component'; @NgModule({ declarations: [ NavigationComponent ], exports: [ ], imports: [ ], providers: [ ] }) export class LayoutsModule {}
和我的app.component.html
<app-navigation></app-navigation> <router-outlet></router-outlet>
您需要在您的 LayoutModule
中导出要提供给其他模块的组件:
import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation/navigation.component';
@NgModule({
declarations: [
NavigationComponent,
],
exports: [
NavigationComponent,
],
imports: [
],
providers: [
]
})
export class LayoutsModule {}
有关共享模块的更多信息:https://angular.io/guide/sharing-ngmodules
您应该从 LayoutsModule
中导出 NavigationComponent
,以便它可以在 LayoutsModule
中使用。基本上,无论你想公开给 Angular 中的另一个模块/系统使用什么,你都必须将那些 component
/directive
/pipe
放在 exports
元数据中NgModule
的选项或者更确切地说,它可以通过 Angular 路由器的 route
段加载。
@NgModule({
declarations: [
NavigationComponent
],
exports: [
NavigationComponent
],
imports: [],
providers: []
})
export class LayoutsModule {}
不确定为什么没有收到错误。它应该会引发错误。