• 技术文章 >web前端 >js教程

    聊聊Angular中组件之间怎么通信

    青灯夜游青灯夜游2022-05-17 21:02:28转载805
    本篇文章带大家继续angular的学习,了解一下Angular中组件通信的方法,希望对大家有所帮助!

    上一篇,我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发,很大程度上是组件化开发,永远离不开组件之间的通信。那么,在 Angular 开发中,其组件之间的通信是怎么样的呢?【相关教程推荐:《angular教程》】

    举一反三,VueReact 中大同小异

    本文纯文字,比较枯燥。因为控制台打印的东西比较鸡肋,所以就不配图了,嗯~希望读者跟着说明代码走一遍更容易吸收~

    1. 父组件通过属性传递值给子组件

    相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE

    <!-- parent.component.html -->
    
    <app-child [parentProp]="'My kid.'"></app-child>

    在父组件中调用子组件,这里命名一个 parentProp 的属性。

    // child.component.ts
    
    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.scss']
    })
    export class ChildComponent implements OnInit {
      // 输入装饰器
      @Input()
      parentProp!: string;
    
      constructor() { }
    
      ngOnInit(): void {
      }
    }

    子组件接受父组件传入的变量 parentProp,回填到页面。

    <!-- child.component.html -->
    
    <h1>Hello! {{ parentProp }}</h1>

    2. 子组件通过 Emitter 事件传递信息给父组件

    通过 new EventEmitter() 将子组件的数据传递给父组件。

    // child.component.ts
    
    import { Component, OnInit, Output, EventEmitter } from '@angular/core';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.scss']
    })
    export class ChildComponent implements OnInit {
      // 输出装饰器
      @Output()
      private childSayHi = new EventEmitter()
    
      constructor() { }
    
      ngOnInit(): void {
        this.childSayHi.emit('My parents');
      }
    }

    通过 emit 通知父组件,父组件对事件进行监听。

    // parent.component.ts
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-communicate',
      templateUrl: './communicate.component.html',
      styleUrls: ['./communicate.component.scss']
    })
    export class CommunicateComponent implements OnInit {
    
      public msg:string = ''
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
      fromChild(data: string) {
        // 这里使用异步
        setTimeout(() => {
          this.msg = data
        }, 50)
      }
    }

    在父组件中,我们对 child 组件来的数据进行监听后,这里采用了 setTimeout 的异步操作。是因为我们在子组件中初始化后就进行了 emit,这里的异步操作是防止 Race Condition 竞争出错。

    我们还得在组件中添加 fromChild 这个方法,如下:

    <!-- parent.component.html -->
    
    <h1>Hello! {{ msg }}</h1>
    <app-child (childSayHi)="fromChild($event)"></app-child>

    3. 通过引用,父组件获取子组件的属性和方法

    我们通过操纵引用的方式,获取子组件对象,然后对其属性和方法进行访问。

    我们先设置子组件的演示内容:

    // child.component.ts
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.scss']
    })
    export class ChildComponent implements OnInit {
    
      // 子组件的属性
      public childMsg:string = 'Prop: message from child'
    
      constructor() { }
    
      ngOnInit(): void {
        
      }
    
      // 子组件方法
      public childSayHi(): void {
        console.log('Method: I am your child.')
      }
    }

    我们在父组件上设置子组件的引用标识 #childComponent

    <!-- parent.component.html -->
    
    <app-child #childComponent></app-child>

    之后在 javascript 文件上调用:

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ChildComponent } from './components/child/child.component';
    
    @Component({
      selector: 'app-communicate',
      templateUrl: './communicate.component.html',
      styleUrls: ['./communicate.component.scss']
    })
    export class CommunicateComponent implements OnInit {
      @ViewChild('childComponent')
      childComponent!: ChildComponent;
    
      constructor() { }
    
      ngOnInit(): void {
        this.getChildPropAndMethod()
      }
    
      getChildPropAndMethod(): void {
        setTimeout(() => {
          console.log(this.childComponent.childMsg); // Prop: message from child
          this.childComponent.childSayHi(); // Method: I am your child.
        }, 50)
      }
    
    }

    这种方法有个限制?,就是子属性的修饰符需要是 public,当是 protected 或者 private 的时候,会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下:

    类型使用范围
    public允许在累的内外被调用,作用范围最广
    protected允许在类内以及继承的子类中使用,作用范围适中
    private允许在类内部中使用,作用范围最窄

    4. 通过 service 去变动

    我们结合 rxjs 来演示。

    rxjs 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。

    后期会有一篇文章记录 rxjs,敬请期待

    我们先来创建一个名为 parent-and-child 的服务。

    // parent-and-child.service.ts
    
    import { Injectable } from '@angular/core';
    import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有实时的作用,获取最新值
    
    @Injectable({
      providedIn: 'root'
    })
    export class ParentAndChildService {
    
      private subject$: BehaviorSubject<any> = new BehaviorSubject(null)
    
      constructor() { }
      
      // 将其变成可观察
      getMessage(): Observable<any> {
        return this.subject$.asObservable()
      }
    
      setMessage(msg: string) {
        this.subject$.next(msg);
      }
    }

    接着,我们在父子组件中引用,它们的信息是共享的。

    // parent.component.ts
    
    import { Component, OnDestroy, OnInit } from '@angular/core';
    // 引入服务
    import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
    import { Subject } from 'rxjs'
    import { takeUntil } from 'rxjs/operators'
    
    @Component({
      selector: 'app-communicate',
      templateUrl: './communicate.component.html',
      styleUrls: ['./communicate.component.scss']
    })
    export class CommunicateComponent implements OnInit, OnDestroy {
      unsubscribe$: Subject<boolean> = new Subject();
    
      constructor(
        private readonly parentAndChildService: ParentAndChildService
      ) { }
    
      ngOnInit(): void {
        this.parentAndChildService.getMessage()
          .pipe(
            takeUntil(this.unsubscribe$)
          )
          .subscribe({
            next: (msg: any) => {
              console.log('Parent: ' + msg); 
              // 刚进来打印 Parent: null
              // 一秒后打印 Parent: Jimmy
            }
          });
        setTimeout(() => {
          this.parentAndChildService.setMessage('Jimmy');
        }, 1000)
      }
    
      ngOnDestroy() {
        // 取消订阅
        this.unsubscribe$.next(true);
        this.unsubscribe$.complete();
      }
    }
    import { Component, OnInit } from '@angular/core';
    import { ParentAndChildService } from 'src/app/services/parent-and-child.service';
    
    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.scss']
    })
    export class ChildComponent implements OnInit {
      constructor(
        private parentAndChildService: ParentAndChildService
      ) { }
      
      
      // 为了更好理解,这里我移除了父组件的 Subject
      ngOnInit(): void {
        this.parentAndChildService.getMessage()
          .subscribe({
            next: (msg: any) => {
              console.log('Child: '+msg);
              // 刚进来打印 Child: null
              // 一秒后打印 Child: Jimmy
            }
          })
      }
    }

    在父组件中,我们一秒钟之后更改值。所以在父子组件中,一进来就会打印 msg 的初始值 null,然后过了一秒钟之后,就会打印更改的值 Jimmy。同理,如果你在子组件中对服务的信息,在子组件打印相关的值的同时,在父组件也会打印。

    【完】

    更多编程相关知识,请访问:编程入门!!

    以上就是聊聊Angular中组件之间怎么通信的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular
    上一篇:什么是单点登录?怎么使用Nodejs实现SSO 下一篇:聊聊node中的fs模块、path模块
    千万级数据并发解决方案

    相关文章推荐

    • 浅析Angular中的多级依赖注入设计• angular学习之浅析响应式表单• Angular怎么结合Git Commit进行版本处理• 聊聊Angular中怎么将迁移tslint至eslint• 聊聊怎么利用Angular+Jenkins展示构建版本• 浅析Angular中怎么用 Api 代理
    1/1

    PHP中文网