DDR爱好者之家

angular组件间通讯的实现方法示例
站长资源 2024/11/24 佚名
72 1538
DDR爱好者之家 Design By 杰米

前言

一个Angular应用一般情况下包含多个组件，而且要让组件互相之间能进行通讯（数据传送），这样才能构成一个有机的完整系统。

1、情景引入

下面例举一个实际遇到的情况：

angular组件间通讯的实现方法示例

上图页面包含两个组件，“新增班级组件”和“选择教师组件”，在新增班级时需要选择改班级的管理教师，管理教师列表要从数据库中获取。选择好教师后，“选择教师组件”要把选择的教师对象传递回“新增班级组件”，这其中涉及到对象传递称为通讯。

2、组件关系

组件之间有几种典型的关系：父子关系、兄弟关系、没有直接关系

angular组件间通讯的实现方法示例

父子关系说明：有A、B两个组件（不一定在同一个模块），如果A组件的view页面中引用了B的selector标签，则称A为B的父组件，或B为A的子组件。

3、通讯方案

了解完组件存在的关系，相应地，组件之间有以下几种典型的通讯方案：

  • 直接的父子关系：父组件直接访问子组件的 public 属性和方法
  • 直接的父子关系：借助于 @Input 和 @Output 进行通讯
  • 没有直接关系：借助于 Service 单例进行通讯
  • 利用 cookie 和 localstorage 进行通讯
  • 利用 session 进行通讯

直接调用

假设BComponent是AComponent的子组件。

对于有直接父子关系的组件，父组件可以直接访问子组件里面 public 型的属性和方法，示例代码片段如下：

<B #child></B> 
<button (click)="child.childFunction()">调用子组件方法</button>

显然，子组件B里面必须暴露一个 public 型的 childFunction 方法，就像这样：

public childFunction():void{ console.log("子组件的名字是"）; }

以上是通过在模板里面定义局部变量的方式来直接调用子组件里面的 public 型方法。在父组件的内部也可以访问到子组件的实例，需要利用到 @ViewChild 注解，示例如下：

@ViewChild(BComponent)
private bComponent: BComponent;

如果通过 @ViewChild 注解，父组件直接访问子组件，那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖，谁也离不开谁，不能单独使用了。尽量避免这样做。

@Input 和 @Output

同样假设BComponent是AComponent的子组件。

我们可以利用 @Input 装饰器，让父组件直接给子组件传递参数，子组件BComponent上这样写：

@Input() 
public title:string;

父组件view上可以这样设置 title 这个参数（这个参数可以是个父组件想要传给子组件的变量或对象等）：

<B title="Hello Angular"></B>

前面是父组件->子组件传递数据，过程相对简单，下面是子组件->父组件传数据，过程较复杂。

@Output 的本质是事件机制，我们可以利用它来监听子组件上派发的事件，子组件上这样写：

@Output() 
public selected=new EventEmitter<要传给父组件的对象类型>();

EventEmitter：在angular中组件通过定义EventEmitter 事件弹射器的方式由子组件向父组件发送数据。

selected是一个事件，触发 selected 事件的方式如下:

this.selected.emit(对象);

在子组件上定义一个方法onChange()，使子组件view能够调用该方法触发 selected 事件：

onChange() { 
 this.selected.emit(要传给父组件的对象); 
}

父组件可以这样监听selected事件：

<B (selected)"onTeacherSelected($event)①"></B>

"color: #ff0000">总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米