Angular基础知识学习（二）上-阿里云开发者社区

服务

创建服务之后，我们在 StorageService.service.ts 中定义一个测试方法：

export class StorageService {
  constructor() {
  }
  test() {
    alert('调用服务方法');
  }
}
复制代码

我们重新建立一个 home 组件，来测试服务调用。

<p>home works!</p>
<button (click)="getService()">获取服务</button>
复制代码

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../../services/storage.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(public storage: StorageService) { }
  ngOnInit(): void {
  }
  getService() {
    this.storage.test();
  }
}
复制代码

测试：

数据持久化到localStroage

之前的 search 和 todoList 测试案例当页面刷新数据都会消失，接下来我们在 service 里构建数据持久化方法（实际是存放到浏览器的 localStroage 中）。

首先在 StorageService.service.ts 定义三个方法：

set(key: string, value: string[]) {
    // @ts-ignore
    localStorage.setItem(key, JSON.stringify(value));
  }
  get(key: string) {
    return JSON.parse(localStorage.getItem(key));
  }
  remove(key: string) {
    localStorage.removeItem(key);
  }
复制代码

在组件中调用服务里定义的方法：

import {Component, OnInit} from '@angular/core';
import {StorageService} from '../../services/storage.service';
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  keyWord: any = '';
  keyWordsOld: any[] = [];
  product: any = '';
  products: any[] = [];
  constructor(public storage: StorageService) {
  }
  // 在初始化方法中查询localStorage中是否有数据
  ngOnInit(): void {
    // tslint:disable-next-line:prefer-const
    let serchList = this.storage.get('serchList');
    // tslint:disable-next-line:prefer-const
    let todoList = this.storage.get('todoList');
    if (serchList) {
      // @ts-ignore
      this.keyWordsOld = serchList;
    }
    if (todoList) {
      this.products = todoList;
    }
  }
  //输入内容后回车触发该方法
  keyup(e) {
    if (e.keyCode === 13){
      //首先判断搜索内容是否重复，若为新则加入
      if (this.keyWordsOld.indexOf(this.keyWord) === -1) {
        this.keyWordsOld.push(this.keyWord);
        this.storage.set('serchList', this.keyWordsOld);
      }
      this.keyWord = '';
    }
  }
  //搜索按钮绑定的方法
  search() {
    if (this.keyWordsOld.indexOf(this.keyWord) == -1) {
      this.keyWordsOld.push(this.keyWord);
      this.storage.set('serchList', this.keyWordsOld);
    }
    this.keyWord = '';
  }
  //删除按钮绑定的方法
  delete(key) {
    this.keyWordsOld.splice(key, 1);
    this.storage.set('serchList', this.keyWordsOld);
  }
  //回车事件，触发该方法
  add(e) {
    // tslint:disable-next-line:triple-equals
    if (e.keyCode == 13) {
      if (!this.equalProduct(this.products, this.product)) {
        this.products.push({
          title: this.product,
          status: 0
        });
        this.product = '';
        this.storage.set('todoList', this.products);
      } else {
        alert('数据已存在');
        this.product = '';
      }
    }
  }
  deleteWay(key) {
    this.products.splice(key, 1);
    this.storage.set('todoList', this.products);
  }
  //新增数据前与已有记录进行比对
  equalProduct(products: any[], value: any) {
    if (!value || value === '') {
      return false;
    }
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < products.length; i++) {
      // tslint:disable-next-line:triple-equals
      if (products[i].title == value) {
        return true;
      }
    }
    return false;
  }
  //change事件用来更新缓存中的内容
  change() {
    this.storage.set('todoList', this.products);
  }
}
复制代码

html 文件基本不变，测试效果：

注意观察下方 localStorage 中的内容，当页面刷新之后数据仍然存在。

生命周期

指令和组件的实例有一个生命周期：当 Angular 新建、更新和销毁它们时触发。通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit， Angular 在创建组件后立刻调用它，：

export class PeekABoo implements OnInit {
  constructor(private logger: LoggerService) { }
  // implement OnInit's `ngOnInit` method
  ngOnInit() { this.logIt(`OnInit`); }
  logIt(msg: string) {
    this.logger.log(`#${nextId++} ${msg}`);
  }
}
复制代码

生命周期的顺序：

这里我们重点学习 ngOnInit() 和 ngAfterViewInit()这两个方法。

首先新建 home 组件，其 html 内容为：

<h2>这里一个home组件---DOM操作演示</h2>
<div id="box">
  这是一个div标签
</div>
<br>
<div id="box2" *ngIf="flag" >
  这是第二个div标签
</div>
复制代码

home.component.ts 文件内容为：

export class HomeComponent implements OnInit {
  flag = true;
  constructor() { }
  /*生命周期函数*/
  ngOnInit(): void {
    /*//组件和指令初始化完成，并不是真正的dom加载完成*/
    let oBox = document.getElementById('box');
    console.log(oBox.innerHTML);
    oBox.style.color = 'red';
    // 此处获取不到dom节点，所以最好不要在ngOnInit方法中获取dom节点
    /*let oBox2: any = document.getElementById('box2');
    console.log(oBox2.innerHTML);
    oBox2.style.color = 'blue';*/
  }
  // 视图加载完成后触发的方法，dom加载完成
  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit(): void {
    let oBox2 = document.getElementById('box2');
    console.log(oBox2.innerHTML);
    oBox2.style.color = 'blue';
  }
}
复制代码

通过操作 dom 节点来区分 ngOnInit 和 ngAfterViewInit 方法，前者用来初始化指令/组件，后者是当 Angular 初始化完组件视图及其子视图之后调用。所以后者才知道 box2 是否渲染完毕，然后才能获取到该 dom 节点并加以修改。

页面运行效果如下：

父子组件之间通信传值

新建四个组件：news,home,header,footer。其中 home 和 header 是父子组件关

系,news 和 footer 是父子组件关系。

父组件通过@Input给子组件传值

1、home.component.html 用来传递变量和方法，也可以将 home 组件中所有信息传递过去。

<app-header [msg]="msg" [title]="title" [run]="run" [home]="this"></app-header>
<br>
<hr>
<br>
<h2>我是home组件</h2>
复制代码

2、home.component.ts

export class HomeComponent implements OnInit {
  msg: any = '我是home组件的msg';
  title: any = 'home组件的title';
  constructor() { }
  ngOnInit(): void {
  }
  run() {
    return '执行home组件的run方法';
  }
}
复制代码

3、header.component.html

<h2>我是header组件</h2>
<br>
<p>{{title}}-----{{msg}}</p>
<br>
<button (click)="getParentWay()">执行home组件的方法</button>
复制代码

4、header.component.ts，子组件中需要引入 Input，用来接收父组件传过来的数据。

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @Input() msg: any;
  @Input() title: any;
  @Input() run: any;
  /*//获取home组件所有内容*/
  @Input() home: any;
  constructor() { }
  ngOnInit(): void {
  }
  getParentWay() {
    // alert(this.run());
    alert(this.home.run());
  }
}
复制代码

5、网页运行效果如下：

6、小结

父组件给子组件传值，即子组件获取父组件的属性和方法，大致分为以下几步：

父组件页面嵌套子组件页面，将属性和方法存放在子组件声明中；
子组件引入 Input 模块；
子组件通过@Input 获取子组件声明中存放的属性和方法；

子组件通过ViewChild给父组件传值

1、news.component.html，

<app-footer #footerComponent></app-footer>
<br>
<hr>
<br>
<h2>我是news组件</h2>
<button (click)="getChildData()">获取子组件的数据</button>
<br>
<br>
<br>
<button (click)="getChildWay()">执行子组件的方法</button>
复制代码

2、news.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  @ViewChild('footerComponent') footer;
  constructor() {
  }
  ngOnInit(): void {
  }
  getChildData() {
    alert(this.footer.msg);
  }
  getChildWay() {
    this.footer.run();
  }
}
复制代码

3、footer.component.html

<h2>我是footer组件</h2>
复制代码

4、footer.component.ts

import {Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  msg: any = '我是footer组件的msg';
  constructor() {
  }
  ngOnInit(): void {
  }
  run() {
    alert('执行footer组件的run方法');
  }
}
复制代码