angular8怎么结合php开发,Angular8 组件通讯基础使用场景（一）

组件交互

父子组件交互(常见)

输入输出属性 Input，Output

最基础的场景之一，使用非常广泛。使用方法，将父组件中的数据与子组件声明的变量进行绑定，保证子组件可以用于内部渲染模板，主要关注下子组件内部代码格式：

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

@Component({

selector: 'app-children',

templateUrl: './children.component.html',

styleUrls: ['./children.component.scss']

})

export class ChildrenComponent implements OnInit {

@Input() List: Array;

constructor() { }

ngOnInit() {

}

}

通过@Input 装饰器来声明这个变量是个输入属性，用于像dom那样绑定属性一样使用，但是有点区别：

当前总记录条数：{{dataList.length}}

用 [ ] 符号与当前组件或者页面中的数据进行绑定。这种场景数据传输方向比较单一、简单，实际开发中更多的是子组件也会操作部分数据，父组件也要时刻接收到变化。

在Angular中，子组件传播事件需要从@angular/core中引入EventEmitter类，demo如下：

//组件内代码

@Output () removeHandler = new EventEmitter();

//组件模板中操作事件

removeAll(){

this.List = [];

this.removeHandler.emit(数据或者事件名称);

}

模板：

子组件显示表格：

NamePhone

{{item.name}}{{item.phone}}

清空全部

父组件：

removeData(e) {

console.log(e);

this.dataList = e; //如何将数据更新到本组件根据场景实现

}

onChanges 生命周期截听输入属性变化

除此之外，官方demo中还提供了2种截听输入值的变化来更新本地数据，一种是对子组件绑定的属性进行getter和setter处理；另外一种用的蛮多的在开发中，利用组件的声明周期钩子 ngOnChanges 函数进行处理，上述demo我作下修改，子组件：

export class ChildrenComponent implements OnInit, OnChanges {

@Input() List: Array;

changeList = [];

@Output() removeHandler = new EventEmitter();

constructor() { }

ngOnInit() {

}

ngOnChanges(changes: { [propKey: string]: SimpleChange }) {

let logs = [];

if (!changes.List.firstChange) {

logs = changes.List.currentValue;

this.changeList = logs;

}

}

removeAll() {

this.changeList = [];

this.removeHandler.emit(this.changeList);

}

}

NamePhone

{{item.name}}{{item.phone}}

清空全部

注意，本案例因我只绑定了一个输入属性，如果是多个，应当使用for循环更新指定的数据。

本地变量互动

官方定义：

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法

子组件修改;

export class ChildrenComponent implements OnInit {

// @Input() List: Array;

changeList = [];

// @Output() removeHandler = new EventEmitter();

constructor() { }

ngOnInit() {

}

addData(data) {

this.changeList = [...this.changeList, data];

}

removeAll() {

this.changeList = [];

}

}

html模板不变；

父组件：

新增一条记录

name：

phone：

添加

清除

当前总记录条数：{{table.changeList.length}}

export class BasicComponent implements OnInit {

constructor() { }

name = '';

phone = '';

ngOnInit() {

}

}

组件内逻辑均删除，因为通过绑定的 #table 可以直接访问子组件属性和方法。

父组件调用@ViewChild

某些时候我们需要在组件中直接访问子组件内属性和方法，本地变量就不适用了，可以考虑使用 @ViewChild()

父组件修改：

新增一条记录

name：

phone：

添加

清除

当前总记录条数：{{dataList.length}}

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

import { ChildrenComponent } from '../children/children.component';

@Component({

selector: 'app-basic',

templateUrl: './basic.component.html',

styleUrls: ['./basic.component.scss']

})

export class BasicComponent implements OnInit {

@ViewChild(ChildrenComponent, { static: false })

private children: ChildrenComponent;

constructor() { }

name = '';

phone = '';

dataList = [];

ngOnInit() {

}

addData() {

this.dataList = [...this.dataList, {

name: this.name,

phone: this.phone

}];

this.children.addData({

name: this.name,

phone: this.phone

});

}

removeAll() {

this.dataList = [];

this.children.removeAll();

}

}

如果子组件内有初始化操作的可以在父组件的AfterViewInit声明周期中初始化。

任意组件之间-服务(Service)

业务中比较多的交互往往不存在父子组件的关联，这时候使用服务交互是个不错的选择。

服务文件代码：

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

import { Subject } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class WorkerListService {

workList = [];

workListSource = new Subject();

private workListSource$ = this.workListSource.asObservable();

constructor() { }

addInfo(info) {

this.workList = [...this.workList, info];

this.workListSource.next(this.workList);

}

updateWorkList(infos: Array) {

this.workList = infos;

this.workListSource.next(this.workList);

}

}

解释下代码部分，首先一个数据可以被订阅的前提必须是一个Observable类型，对于普通数组 of(SomeArray) 已经是一个Observable类型可以订阅，对于返回的http请求也是个Observable类型，在页面中可以直接订阅处理，在Ng官方文档有列举Observable类型的说明，了解更多可以前往查看，next() 方法告知这个可观察对象更新内容，这样你的订阅(subscribe)才会抓取到更新后的信息。

原父组件：

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

import { WorkerListService } from '../worker-list.service';

@Component({

selector: 'app-basic',

templateUrl: './basic.component.html',

styleUrls: ['./basic.component.scss']

})

export class BasicComponent implements OnInit {

constructor(

private workListService: WorkerListService

) { }

name = '';

phone = '';

dataList = [];

ngOnInit() {

this.workListService.workListSource.subscribe(res => {

this.dataList = res;

});

}

addData() {

this.workListService.addInfo({

name: this.name,

phone: this.phone

});

}

removeAll() {

this.dataList = [];

this.workListService.updateWorkList(this.dataList);

}

}

原子组件：

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

import { WorkerListService } from '../worker-list.service';

@Component({

selector: 'app-children',

templateUrl: './children.component.html',

styleUrls: ['./children.component.scss']

})

export class ChildrenComponent implements OnInit {

changeList = [];

constructor(

private workListService: WorkerListService

) {

this.workListService.workListSource.subscribe(res=>{

this.changeList = res;

});

}

ngOnInit() {

}

}

这样就可以保证组件可以随时获取到最新的数据更新，而不用担心是否为父子级组件，也是最常用的方式。