Angular 从入坑到挖坑 - 组件食用指南 (7)

创建一个服务，并添加到模块中

## 在 services/storage 路径下创建一个 storage 服务 ng g service services/storage/storage import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ProductListComponent } from './product-list/product-list.component'; import { FormsModule } from '@angular/forms'; import { ParentComponentComponent } from './parent-component/parent-component.component'; import { ChildComponentComponent } from './child-component/child-component.component'; // 引入自定义的服务 import { StorageService } from './services/storage/storage.service'; @NgModule({ declarations: [ AppComponent, ProductListComponent, ParentComponentComponent, ChildComponentComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], // 配置自定义的服务 providers: [StorageService], bootstrap: [AppComponent] }) export class AppModule { }

在组件中使用服务

在需要使用的组件中引入服务，然后在组件的构造函数中通过依赖注入的方式注入这个服务，就可以在组件中完成对于这个服务的使用

在父组件中对数据进行赋值，然后调用服务的方法改变数据信息

import { Component, OnInit } from '@angular/core'; // 引入服务 import { StorageService } from '../services/storage/storage.service'; @Component({ selector: 'app-parent-component', templateUrl: './parent-component.component.html', styleUrls: ['./parent-component.component.scss'] }) export class ParentComponentComponent implements OnInit { public msg = 'this is a service default value writen in parent component'; constructor(private storage: StorageService) { this.storage.setMsg(this.msg); } ngOnInit(): void { } submit() { this.storage.setMsg(this.msg); } } <h2>父组件内容：</h2> <h3>3、通过服务在属性中共享数据</h3> <p> 修改服务中的数据值 <input type="text" [(ngModel)]="msg"> <button (click)="submit()">提交</button> </p> <p>服务中的数据：{{msg}}</p> <hr> <h2>子组件内容：</h2> <app-child-component></app-child-component>

在子组件中引入服务，从而同步获取到父组件修改后的服务中的数据信息

import { Component, OnInit } from '@angular/core'; // 引入服务 import { StorageService } from '../services/storage/storage.service'; @Component({ selector: 'app-child-component', templateUrl: './child-component.component.html', styleUrls: ['./child-component.component.scss'] }) export class ChildComponentComponent implements OnInit { public storageMsg: string; constructor(private storage: StorageService) { } ngOnInit(): void { } getServiceMsg() { this.storageMsg = this.storage.getMsg(); } } <button (click)="getServiceMsg()">获取服务中的数据值</button> <p> 服务中 msg 属性值：{{storageMsg}} </p>

五、组件的生命周期钩子函数

当 angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数，通过在组件中实现这些生命周期函数，从而介入到这些关键时刻

钩子函数 触发时机
ngOnChanges   被绑定的输入属性值发生变化时触发，会调用多次；如果没有使用到父子组件传值，则不会触发  
ngOnInit   初始化组件时会调用一次，一般是用来在构造函数之后执行组件复杂的初始化逻辑  
ngDoCheck   只要数据发生改变就会被调用  
ngAfterContentInit   组件内容渲染完成后调用一次  
ngAfterContentChecked   只要组件的内容发生改变就会被调用  
ngAfterViewInit   视图加载完成后触发一次，一般用来对视图的 dom 元素进行操作  
ngAfterViewChecked   视图发生变化时调用，在组件的生命周期中会调用多次  
ngOnDestroy   只在销毁组件时调用一次，一般用来在组件销毁前执行某些操作