Angular4学习笔记——组件之间的交互

Guakin_Huang 发布于2019-08-21 17:48 / 2507人阅读

摘要：具体思路子组件暴露一个属性，当事件发生时，子组件利用该属性向上弹射事件。父组件绑定到这个事件属性，并在事件发生时作出回应。这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子组件通过各自的构造函数注入该服务。

通过输入型绑定把数据从父组件传到子组件

Angular对于父组件 => 子组件的数据通信做法和Vue很相似。

// 父组件html模板

    
// 子组件接收数据
import { Component, Input } from "@angular/core";
import { Hero } from "./hero";

export class HeroChildComponent {
  @Input() hero: Hero;
  @Input("master") masterName: string;
}
// 第二个@Input为子组件的属性名masterName指定一个别名master，但是这个做法并不推荐

看着是不是很眼熟，写代码的逻辑和Vue几乎可以说是一样了，只是写法上略有区别而已。

这个问题下还有两个截听输入属性值变化的方法，代码逻辑不难推，但是其中的应用场景方面我还没想到是怎么样的，之后也许继续看Angular文档会理解的更透彻一些，届时再来补充啦~~

父组件监听子组件的事件

这个操作方法也和Vue中的做法非常接近，而且在上一篇笔记中也有所提及。
具体思路：子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。
还有，子组件的EventEmitter属性是一个输出属性，通常带有@Output装饰器，比较完整的示例如下：

// 子组件：先在自己的组件中触发了vote方法，然后在vote方法中向父组件发出onVoted事件，同时传送一个payload(agreed)
// 在Vue中的写法是this.$emit(onVoted,agreed)
import { Component, EventEmitter, Input, Output } from "@angular/core";

export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter();
  voted = false;
 
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}
// 父组件：监听onVoted事件，如果监听到了则触发自己组件中的agree方法,同时通过$event把payload传参给agree
html:

ts:
export class VoteTakerComponent {
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

父子组件的其他互动关系 父组件与子组件通过本地变量互动

父组件对子组件的数据绑定属于单向绑定，子组件无法直接把数据、属性和自身的方法传送给父组件使用。尽管有EventEmitter属性，但是有时候需要直接访问子组件的内容，用这种方法并不合适。

// 可以在父组件的模板中直接访问子组件的所有属性和方法，例如此例便是直接访问了子组件的start(),stop()方法和seconds属性


{{timer.seconds}}

父组件调用@ViewChild()

上述方法有一定局限性：父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。如果想要在代码中直接访问子组件的内容，可以使用这个方法把子组件作为ViewChild，注入到父组件里面，具体操作如下：

// 需要通过@ViewChild属性装饰器，将子组件CountdownTimerComponent注入到私有属性timerComponent里面，并挂在AfterViewInit生命周期钩子里
export class CountdownViewChildParentComponent implements AfterViewInit {
// 在父组件中将子组件注册为变量timerComponent,记得在括号里写明子组件名字~~ 
  @ViewChild(CountdownTimerComponent)  private timerComponent: CountdownTimerComponent;
// 这样就可以通过this.timerComponent访问子组件的内容了
  start() { this.timerComponent.start(); }
  stop() { this.timerComponent.stop(); }
}

通过服务来通讯

父组件和它的子组件（们）共享同一个服务，利用该服务在父子组件之间实现双向通讯。
该服务实例的作用域被限制在父组件和其子组件（们）内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。

父子组件通过各自的构造函数注入该服务。文档中的例子还需要一些额外知识才能明白，之后再分析啦！~

前端新人，写的不对的地方还请指出；
如果觉得对你有帮助，可以点个赞鼓励一下我哦！~~

云服务器私有云组件之间通信组件交互学习笔记学习笔记一

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90023.html

Angular4学习笔记——数据绑定

摘要：所以，在的世界中，唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的和事件打交道，而就基本上靠边站了，只有比较特殊的情况才会用到他。事件绑定事件名事件绑定分为对原生事件绑定和自定义事件绑定。数据绑定总体而言有三种类型： {{...}} 插值表达式绑定属性绑定（包括property和attitude 事件绑定插值表达式绑定既可以写在html结构中，...

MRZYD 2019-08-21 17:48 评论0 收藏0
Angular4学习笔记之DOM属性绑定

摘要：如果没有，请查看学习笔记之安装和使用教程事件绑定准备工作了解目的在模版的界面上面增加一个按钮，然后通过小括号绑定一个事件。简介使用插值表达式将一个表达式的值显示在模版上 {{productTitle}} 使用方括号将HTML标签的一个属性值绑定到一个表达式上使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上按钮绑定事件注意在开始下面的例子之前，请先确认已...

Genng 2019-08-21 18:34 评论0 收藏0
Angular4学习笔记——生命周期钩子

摘要：所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，会找到并调用像这样的钩子方法，有没有接口无所谓。当使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法用处当设置数据绑定输入属性发生变化时响应。接口和钩子在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。在这里主要使用的是类接口及其实现： interf...

fizz 2019-08-21 17:48 评论0 收藏0
angular4学习记录 -- 组件通讯、生命周期

摘要：每完成被投影组件内容发生变化时调用。每次做完组件视图和子组件视图的变更检测之后调用。组件销毁时调用，主要用于内存回收。策略策略是当组件的输入属性发生变更时才会检查当前组件及其子组件。 angular4 组件通讯、生命周期主要通讯形式父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件父组件通过局部变量获取子组件的引用父组件使用@ViewChild获取子组件的引用两个不...

shadajin 2019-08-21 16:45 评论0 收藏0
前端框架这么多，该如何抉择？

摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。在项目中必不可少的便...

Jackwoo 2019-08-29 15:37 评论0 收藏0