Question

假设我有两个模块＆＃34; AppModule＆＃34; ＆安培; ＆＃34; EmployeeModule＆＃34 ;. AppComponent.ts属于＆＃34; AppModule＆＃34; ，EmployeeComponent.ts属于EmployeeModule。

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

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

AppComponent.ts：

＆＃13;

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

＆＃13;

App.Module.ts

＆＃13;

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

＆＃13;

employee.component.ts

＆＃13;

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

＆＃13;

employee.module.ts

＆＃13;

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

＆＃13;

我希望看到如下结果：

[需要查看此输出]

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

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

1 个答案: