如何以角度 2 将一个模块与另一个模块挂钩答案

【问题标题】：How to hook one module with other module in angular 2如何以角度 2 将一个模块与另一个模块挂钩
【发布时间】：2018-03-02 13:29:29
【问题描述】：

假设我有两个模块“AppModule”和“EmployeeModule”。而 AppComponent.ts 属于 "AppModule" ， EmployeeComponent.ts 属于 EmployeeModule。

我想从 AppModule 中调用 EmployeeModule，这样在打开应用时我会看到两个模块的内容：

TypeScript 中的文件夹结构： enter image description here

AppComponent.ts：

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

@Component({
    selector:'app-root',
    template:`
              <h1>This is Root (AppComponent)</h1>
               
    `
})
export class AppComponent{}

App.Module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import { EmployeeModule } from './Employee/employee.module';

@NgModule({
    imports:[BrowserModule,EmployeeModule],
    declarations:[AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{}

employee.component.ts

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

@Component({
    selector:'emp-root',
    template:`
              <h1>This is Root (Employee Component)</h1>
    `
})
export class EmployeeComponent{}

employee.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {EmployeeComponent} from './employee.component';
@NgModule({
    imports:[BrowserModule],
    declarations:[EmployeeComponent]
})
export class EmployeeModule{}

我想看到这样的结果：

[需要看这个输出]

Fianal result

【问题讨论】：

标签： angular module chaining

【解决方案1】：

在此文件中进行更改：

employee.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {EmployeeComponent} from './employee.component';
@NgModule({
    imports:[BrowserModule],
    declarations:[EmployeeComponent],
    exports: [EmployeeComponent], //export of the component that you will use in other module
})
export class EmployeeModule{}

AppComponent.ts

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

@Component({
    selector:'app-root',
    template:`
              <h1>This is Root (AppComponent)</h1>
              <emp-root></emp-root>
    `
})
export class AppComponent{}

Working example in plunker

【讨论】：