生成一个服务

ng g service services/common

一、在app.module.ts中配置

import {CommonService} from './services/common.service'
...
 providers: [CommonService],

二、在其他组件内使用

0.在serve里创建

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class CommonService {
  public defaultCity:string="武汉"
  constructor() { }
}

1.引入

home.ts

import {CommonService} from '../../services/common.service'

2.构造

home.ts

constructor(public common:CommonService) { }

3.使用

 ngOnInit() {
    console.log(this.common.defaultCity)
  }

4.在页面内使用

方法1——直接使用

<p>{{common.defaultCity}}</p>

方法2——间接使用

public city:string=""
this.city=this.common.defaultCity

<p>{{city}}</p>

三、修改service里的数据

1.在service.ts里创建一个方法

changeCity(value:string){
    this.defaultCity=value
  }

2.在home.ts里调用方法修改service.ts里的数据

  handleBtn(city:string){
    this.common.changeCity(city)
  }

四、数据更改后刷新会导致还原，加入缓存来完善

//service.ts
changeCity(value:string){
    this.defaultCity=value;
    localStorage.setItem("city",value)
  }

//home.ts
//这里使用第一种调用方法
  ngOnInit() {
    this.defaultCity=this.common.getCity();
  }