Angular父子组件通信及和vue的对比

一、父向子组件传递

父组件给子组件传值-@Input

父组件不仅可以给子组传递简单的数据，也可以把自己的方法整个传递给子组件

1 传入数据

<app-sub-dom [title]="msg"></app-sub-dom>

2 子组件引入Input模块

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

3 子组件获取父组件数据

@Input() title: sring;

父组件向子组件传递方法

和传值一样，例如
父组件中加一个sayHello方法

  sayHello(): void {
     
   console.log('我是父组件的方法run');
 }

父组件的html：

 <app-sub-dom [title]="msg" [sayHello]="sayHello">app-sub-dom>

子组件的ts：

 @Input() sayHello: any;
 @Input() title: string;
 
 ngOnInit(): void {
     
   this.sayHello();
   console.log('来自dom组件的属性', this.title);
 }

父组件向子组件传递自身

 <app-sub-dom [title]="msg" [sayHello]="sayHello" [dom]="this">app-sub-dom>

子组件的ts：

@Input() dom: any;

二、父组件获取子组件

使用ViewChild获得子组件本身

获得了子组件，自然其属性、方法都可获取

viewchild还可用于获取dom节点，使用见viewchild获取子组件和dom节点

步骤如下，详细查看链接内内容即可

• 在父组件的html中给子组件起名字

<h2>dom works!h2>
<div #myBox>
    hello
div>
<app-sub-dom #subDom>app-sub-dom>

• 在父组件的ts中引入viewchild装饰器
• 在父组件的ts中通过viewchild装饰器及名字获得子组件
• 使用子组件的方法和属性
• 在父组件的ts中使用viewchild获取子组件

import {
      Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
export class DomComponent implements OnInit, AfterViewInit {
     
  // 获取view节点
  @ViewChild('myBox') myBox: any;
  ngAfterViewInit(): void {
     
    // 调用子组件里的方法
    this.subDom.run();
  }
}

三、子组件通过output触发父组件的方法

到此父子组件之间传值已完成，但angular另提供事件驱动，这种方法比较麻烦，一般不用

1. 子组件引入output和eventEmitter装饰器

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

2. 子组件中实例化EventEmitter

  @Output() private outer = new EventEmitter();

3. 子组件通过EventEmitter对象outer实例广播数据

 sendToParent(): void {
     
   this.outer.emit('我是子组件的数据');
 }

4. 绑定对应父组件的方法，执行子组件方法时触发该父组件方法

父组件中：

<app-sub-dom #subDom  [title]="msg" [sayHello]="sayHello" [dom]="this" (outer)="sayHi($event)">app-sub-dom>

  sayHi(e): void {
     
   alert(e);
 }

此时点击子组件的按钮，执行父组件的sayHi方法。
【注意】父组件的html中，必须是 (outer)="sayHi($event)，必须是$event，不可以使用其他名字。

这里就很像vue中的子组件emit触发父组件方法

四、和Vue在使用上的对比

回忆下vue中的父子组件通信
父组件给子组件传值：v-bind，此处类似于angular Input装饰器父传子方法，只不过angular可以传属性、方法、本身，vue只可以传属性

<my-child :deliverParentAge="parentAge">my-child>

子组件中使用props接收

props {
      
  deliveryPrarentAge: Number
}

---

子组件向父组件发射事件，即触发父组件事件
子组件中使用$emit(xxx, 3)，父组件在标签中使用@xxx='yyyy’即可。v-on
类似于angular中的Output和EventEmitter，只不过vue的简单，直接this. $ emit，而且在父组件的html中一个是@xxx='yyyy’，一个是(xxx)=‘yyyy($event)’

---

总结：父向子传递数据，子通过事件触发才可使用父dd额。使用v-model那数据就是双向的，vue对input、select都实现了v-model，但如果是自己写一个子组件，想要和父双向v-model，就要结合v-bind和v-on实现。v-model的本质就是数据传递和事件发射。这个之前博客有写过。

---

虽然说只有父向子传递数据，但可以父组件调用子组件本身从而获取其属性和方法：（和viewchild类似）
在vue中，父组件要获得子组件的方法是通过ref调用的（也是通过ref获取dom节点！！！）

使用表格对比如下，更加简洁：

可以看出，angular得Input即可调用父的方法、属性和本身，那么就没必要用图中第二种去父的方法。所以该方法很少用。而vue的props只能传递属性，无法传递方法，所以要用第二种事件触发调用父亲的方法。

五、angular非父子组件通信

之前的博客说过服务，服务可以实现非父子组件的通信，localStorage也可以。
Vue中可以使用vuex或总线bus，不详写。