Angular组件交互 - HelloWorld开发者社区

Angular2中的组件交互方式很多，可分为父子组件交互和非父子组件交互两种情况。

在学习之前需要了解组件的@Input和@Output的用法

//子组件中内容
@Input() 绑定的属性名: 值类型;  //其值等于在父模板中绑定变量的值

//父组件模板中
<子组件标签 [绑定的属性名]="变量"></子组件标签>

//父组件类中
定义变量值...

**@Input**修饰的“属性名”属于输入属性，这个输入属性从其父组件中获取数据。Input就是把父组件中的数据拿到子组件中处理。注意Input()只有指令才能设置别名

//子组件
import { EventEmitter, Output } from '@angualr/core'

...

@Output() 绑定的属性名: new EventEmitter<值类型>;

export class ...{
  ...
  某个方法() {
    this.绑定的属性名.emit(发送的东西）;
  }
}

//子组件模板
<p (事件)="某个方法">...</p>

//父组件模板
<子组件标签 (绑定的属性名)="父组件方法($event)"></子组件标签>

//父组件类
父组件方法(形参_接收到的东西) {
  //表达式
  ...
}

**@Output**是以事件的形式，将数据通过EventEmitter抛出去。@Output就是在子组件模板触发事件，并返回内容到父组件中响应事件。这个东西书上还有一个名字叫做自定义事件。

父组件向自子组件传递数据

父组件的数据通过子组件的输入属性流入子组件，在子组件完成接收拦截。

接收数据的方法即上面所说的**@Input**。拦截处理方法有两种，setter拦截输入属性和ngOnChanges监听数据变化。

setter拦截输入属性

setter和getter通常配套使用，setter可以对属性进行再封装处理，在通过getter返回处理过的属性值。

比如:

@Input()
  set 绑定的属性名(形参接收的值: 值类型) {
    //数据处理
  }
  get 绑定的属性名(){return 上面数据处理的结果}

ngOnChanges监听数据变化

ngOnChanges是Angular2组件的生命周期钩子之一，该方法接收一个对象参数，包含当前值和变化前的值。在ngOnInit之前，或当该组件数据绑定的输入属性值发生变化时会触发。

SimpleChange是Angular的一个基础类，用于处理数据的前后变化，包含两个重要的成员变量，previousValue和currentValue。

import { SimpleChanges,OnChanges } from '@angular/core';

  cc:Array<any>=[];
  ngOnChanges(changes: SimpleChanges) {
    for (let aa in changes) {                 //不知道怎么监听指定输入属性...好了先不管他
      let chng = changes[aa];
      let cur  = chng.currentValue;
      let prev = JSON.stringify(chng.previousValue);   //可以设置格式
      this.cc.push(`${cur},${prev}`);
    }

子组件向自父组件传递数据

除了上面的@Output以外，父组件对子组件的引用还有很多方法，这里学习两种：

父组件通过局部变量获取子组件引用
父组件使用@ViewChild获取子组件的引用

通过局部变量获取子组件引用

使用Angualar中的局部模板变量，通过在父组件的模板中为子组件创建一个局部变量，来获取子组件公共成员变量和函数的权限，其作用域范围仅存在于定义该模板局部变量的子组件中。

在父组件模板中的子标签上绑定一个局部变量（用#标记），来获取子组件类的实例对象。

//父组件中
<子组件标签 (事件)="模板变量.子组件方法或属性" #模板变量></子组件标签>

使用@ViewChild获取子组件的引用

模板变量只能在模板中使用，不能在父组件类里使用。

如果父组件需要获取到子组件中变量或者方法的读写权限时，可以通过**_@ViewChild注入_**的方式实现。

@ViewChild(子组件类名/模板局部变量） 名字: 子组件类;

//现在就可以在父组件中引用子组件了。

非父子组件交互

非父子组件之间的交互主要通过服务来完成，注意服务要用@Injectable表示该服务可注入依赖，虽然不是必须的，但还是加上的好。

//服务类A
import { Injectable } from '@angular/core';

import { 组件A } from './组件A';

@Injectable()
export class ServiceA {
  .......
  //对组件A的数据什么的进行操作,返回数据什么的
}

简单来说，就是创建一个服务类A，对组件A进行操作，比如说获取数据什么的。然后在组件B中导入服务A，实例化服务A，然后就可以调用它的方法，间接取得组件A的数据什么的。

  //组件B
  import { Component, OnInit } from '@angular/core';

  import { ServiceA } from './servicea';

  ...
  providers: [ServiceA]    //注册一下,创建一个服务A的实例
  ...

  export class AppComponent implements OnInit {
  
  constructor(private servicea: ServiceA) { }  //定义一个私有属性

  函数(): void {
    this.servicea.里面的方法();
  }
  ngOnInit(): void {
    this.函数();
  }