angular6自定义模块对外提供服务

文章参考

特性模块

案例

创建一个模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {HuangbiaoIntroComponent} from '../hb-component/huangbiaoIntro/huangbiao-intro.component';

@NgModule({
  imports: [
    CommonModule
  ],
  // 属于当前模块的组件、指令、管道
  declarations: [
    HuangbiaoIntroComponent
  ],
  // 对外暴露的指令，引入该模块之后就可以直接使用
  exports:[
    HuangbiaoIntroComponent
  ]
})
export class HbModuleModule { }

使用exports指令对外提供服务

模块中的组件

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

@Component({
  selector: 'hb-huangbiao-intro',
  templateUrl: './huangbiao-intro.component.html',
  styleUrls: ['./huangbiao-intro.component.scss']
})
export class HuangbiaoIntroComponent implements OnInit {

  author: string = "黄彪";
  createDate: Date = new Date();

  constructor() {
    
  }

  /**
   * 生命周期函数 加载触发的方法
   */
  ngOnInit() {
  }

}

在主模块中引入自定义的模块HbModuleModule

/**
 * 告诉angular 如何组装应用
 */

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule }   from '@angular/common/http';
import { HbModuleModule } from '../moduleHb/hb-module/hb-module.module'

import { AppComponent } from './app.component';
import { HeaderComponent } from './page/header/header.component';
import { NewsComponent } from './page/news/news.component';
import {StorageService} from './page/service/storage.service'
import { AppRoutingModule }     from './router/app-routing.module';
import { HttpdemoComponent } from './page/httpdemo/httpdemo.component';
import { StrLengthPipe } from './pipeCustomer/str-length.pipe';
import { HbFontcolorDirective } from './directiveCustomer/hb-fontcolor.directive';
import { HbBackgroundDirective } from './directiveCustomer/hb-background.directive';

//@NgModule 装饰器将AppModule标记为Angular 模块类（也叫做 NgModule类）
// @NgModule 接收一个元数据对象，告诉Angular 如何编译和启动应用
@NgModule({
  // 该模块的 declarations 数组告诉 Angular 哪些组件属于该模块
  // 该应用所拥有的组件——组件、管道、指令
  declarations: [
    AppComponent,
    HeaderComponent,
    NewsComponent,
    HttpdemoComponent,
    StrLengthPipe,
    HbFontcolorDirective,
    HbBackgroundDirective
  ],
  // 当前项目依赖哪些模块
  imports: [
    BrowserModule,
    HttpClientModule,
    // 如果要引入双向绑定，则需要引入FormModule
    FormsModule,
    AppRoutingModule,
    // 自定义模块
    HbModuleModule
  ],
  // 各种服务提供商——定义服务
  providers: [
    StorageService
  ],
  // 默认启动哪个组件——根组件
  bootstrap: [AppComponent]
})

// 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是一定要写
export class AppModule { }

在主模块的组件中使用

主模块组件的模板

<div class="huangbiao">
  <div class="liumei">
    header works! -{{title}} - {{attr}}
  </div>
  <div>
    {{currentDate | date:"yyyy-MM-dd"}} - currentDate | date:"yyyy-MM-dd"
  </div> 
  <div>
    {{title | strLength}}
  </div>
</div>
<hb-huangbiao-intro></hb-huangbiao-intro>

<span appHbFontcolor appHighlight="green" appHbBackground="yellow">my name is huanghaili</span>

主模块组件配置

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../service/storage.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  attr: string = "五矿23所";
  title: string = "";
  public currentDate : Date = new Date();

  constructor(storageService: StorageService) {
    this.title = "huanghaili";
    console.dir(storageService)
  }

  /**
   * 生命周期函数 加载触发的方法
   */
  ngOnInit() {
  }

}

说明

在主模块的组件中，使用自定义模块中的组件，实际上是没有任何的引入动作，直接在模板中使用<hb-huangbiao-intro></hb-huangbiao-intro>即可。