一、service

1-1 生成服务

  1. ng g service services/common

1-2 在根模块中配置

  1. //app.module.ts
  2. import {CommonService} from './services/common.service';
  3. @NgModule({
  5.   providers: [CommonService]
  6. })
  7. export class AppModule { }

1-3 组件使用服务

  1. export class CommonService {
  2.   public defaultCity:string = "武汉"
  3.   constructor() { }
  4. }
  7. //1.导入服务
  8. import {CommonService} from '../../services/common.service'
  9. export class HomeComponent implements OnInit {
  10.     //2.构造函数中配置
  11.   constructor(public common:CommonService) { }
  13.   ngOnInit() {
  14.       //3.使用
  15.     console.log(this.common.defaultCity);
  16.   }
  18. }

1-4 更改服务

//组件中

  1. <button *ngFor="let item of hotCities" (click)="handleClick(item)">{{item}}</button>
  3.   handleClick(item:string){
  4.     console.log(item)
  5.     this.common.changeCity(item);
  6.   }
  1. //service
  2.   changeCity(value:string){
  3.     this.defaultCity=value;
  4.   }

1-5 缓存

  1. //service
  2.   getCity(){
  3.     if(localStorage.getItem("city")){
  4.       this.defaultCity=localStorage.getItem("city")
  5.     }
  6.     return this.defaultCity
  7.   }
  8.   changeCity(value:string){
  9.     ...
  10.     localStorage.setItem("city",value)
  11.   }
  1. //组件
  2. export class HomeComponent implements OnInit {
  3.   public city:any;
  4.   constructor(public common:CommonService) { }
  6.   ngOnInit() {
  7.     this.city=this.common.getCity()
  8.   }
  9. }

二、生命周期和DOM获取

  1. ngAfterViewInit(){
  2.     //推荐在此生命周期函数中操作DOM
  4. }

2-1 ViewChild

  1. //1.给DOM命名
  2. <div #app  *ngIf="flag">
  3.     显示
  4. </div>
  6. //2.配置ViewChild
  7. import { Component, OnInit,ViewChild } from '@angular/core';
  9. export class AboutComponent implements OnInit {
  11.   @ViewChild('app',{static:false}) app:any;
  13.   ngAfterViewInit(){
  14.    console.log(this.app);
  15.   }
  16. }