[Angular学习笔记]Angular组件通讯

组件通讯

前端框架,例如extjs,vue,angular等,都是或趋于组件化,所以组件间的通讯,是一个亟需解决的问题

一般而且言,这些组件之间都会形成这种树形结构

组件之间会有下列3种关系:

• 父子关系

• 兄弟关系

• 没有直接关系

本文这要介绍一下几种通讯方式：

• @Input（父传子）
• @Output（子传父）

目前先写这两种方式，其他方式等我再学几天在写

@Input->父对子传值

@Input为一个装饰器，用来把某个类字段标记为输入属性，并提供配置元数据。 该输入属性会绑定到模板中的某个 DOM 属性。当变更检测时，Angular 会自动使用这个 DOM 属性的值来更新此数据属性。
使用方法也很简单，但是前提需要先从@angular/core引入

import { Input } from '@angular/core';

然后就可以愉快的使用了

@Input() prentData;

放上完整代码：
父组件：

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

@Component({
  selector: 'app-root',
  template: `
    <p>我是父组件</p>
    <app-child [prentData]="testData"></app-child>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test';
  testData: number;
  ngOnInit(): void {
    this.testData = 1;
  }
}

子组件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>我是子组件</p>
    <p>父组件传过来的值：{{ prentData }}</p>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() prentData;
  constructor() { }

  ngOnInit() {
  }
}

运行效果

@Output ->子对夫传值

没有错，@Output也是一个装饰器，也要先进行引入再使用

import { Output } from '@angular/core';

还需要引入一个EventEmitter这玩意，咱也不知道这是啥，咱也不敢问

import { EventEmitter } from '@angular/core';

啥也不说了，直接上代码吧

• 子组件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>我是子组件</p>
    <button (click)="childClick()">点我向父组件传值</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() childData = new EventEmitter<string>();//将字段标记为输出类型
  childClick() {//监听事件，并通知父组件
    this.childData.emit('我是子组件传过来的值');
  }
  ngOnInit() {
  }

}

• 父组件

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

@Component({
  selector: 'app-root',
  template: `
    <p>我是父组件</p>
    <p>{{ testData }}</p>
    <app-child (childData)="childClick($event)" ></app-child><!--监听事件，并绑定处理方法childClick()-->
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'test';
  testData: string;
  //处理事件，并将子组件传过来的值赋值给testData变量
  childClick(childData: string) {
    this.testData = childData;
  }
  ngOnInit(): void {
  }
}

点击前
点击后