如何在角度2中将一个模块与其他模块挂钩

Question

假设我有两个模块“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

Answer 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