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

文章目录

    • 一、父向子组件传递
      • 父组件给子组件传值-@Input
        • 1 传入数据
        • 2 子组件引入Input模块
        • 3 子组件获取父组件数据
      • 父组件向子组件传递方法
      • 父组件向子组件传递自身
    • 二、父组件获取子组件
      • 使用ViewChild获得子组件本身
    • 三、子组件通过output触发父组件的方法
      • 1. 子组件引入output和eventEmitter装饰器
      • 2. 子组件中实例化EventEmitter
      • 3. 子组件通过EventEmitter对象outer实例广播数据
      • 4. 绑定对应父组件的方法,执行子组件方法时触发该父组件方法
    • 四、和Vue在使用上的对比
    • 五、angular非父子组件通信

一、父向子组件传递

父组件给子组件传值-@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( e v e n t ) , 必 须 是 event),必须是 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父子组件通信及和vue的对比_第1张图片

使用表格对比如下,更加简洁:

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

五、angular非父子组件通信

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

你可能感兴趣的:(Angular,angular2,vue,typescript)