zoukankan      html  css  js  c++  java
  • Angular中的服务 以及自定义服务-数据持久化

    Angular采用模块化、组件化的开发方式

    组件之间的方法不能相互调用,一些公共的功能封装到服务里面,各组件调用服务里面的方法

    服务之间可以相互调用;服务不能调用组件

     

     二、 创建服务命令

    ng g service my-new-service
    创建到指定目录下面
    ng g service services/storage

    三、app.module.ts (根组件)里面引入创建的服务

    1.app.module.ts 里面引入创建的服务

    import { StorageService } from './services/storage.service';

    2. NgModule 里面的 providers 里面依赖注入服务

    @NgModule({
    declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent,
    TodolistComponent
    ],
    imports: [
    BrowserModule,
    FormsModule
    ],
    providers: [StorageService],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

    四、(其他组件)使用的页面引入服务,注册服务

    import { StorageService } from '../../services/storage.service';
    
    constructor(private storage: StorageService) {
    }

    数据持久化

    ngOnInit()生命周期函数
    引入服务里面的数据/函数
    在服务里面定义getData()方法
     ngOnInit(){
    let data = this.storage.getData();
    console.log(data)
    }
     
     
     
  • 相关阅读:
    Nginx 基本命令
    Nginx配置详细
    MySQL 函数大全
    X-Frame-Options 配置
    Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
    idea java 非web程序打包
    mysql 存储过程
    webstorm 重置所有设置
    vue input 赋值无效
    MySQL 性能优化神器 Explain 使用分析
  • 原文地址:https://www.cnblogs.com/foremostxl/p/12937894.html
Copyright © 2011-2022 走看看