文章参考
指令创建service
ng g service storageService
service说明
service 是一个单例,如果放在根路由下,就是在所有的组件都是共享的,因此可以利用service来传递和共享数据。
案例
自定义服务内容
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class StorageService {
public serviceName: string = "StorageService";
constructor() {
}
}
在NgModule中providers声明
/**
* 告诉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 { }
使用service
在组件的构造方法中直接添加参数和类型,就能够依赖注入到当前组件中
import { Component, OnInit } from '@angular/core';
import {StorageService} from '../service/storage.service';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
public message: string;
public username: any;
public newsList = [];
public storageService: StorageService = null;
// public storageService: StorageService = new StorageService();
// 构造方法中添加service类型,就是依赖注入
constructor(storageService: StorageService) {
this.username = "username";
this.message = "我是消息属性";
this.storageService = storageService;
// console.dir(this.storageService);
console.dir(storageService);
}
// 添加新新闻
addData(){
console.log("addData");
this.newsList.push(this.username);
}
// 删除数据
delItem(index){
alert(index);
this.newsList.splice(index,1);
}
// 获取事件
keyAction(e){
console.dir(e);
}
ngOnInit() {
}
updateService(){
this.storageService.serviceName = "liumei-huanghaili";
}
}