Angular 组件通讯方式

 

（一）父子组件 输入/输出属性

　　   关键词  Input,Output,EventEmitter。

　　　父子组件信息信息，分为

　　　　（1）子组件向父组件传递

　　　　（2）父组件向子组件传递

（二）模版变量与 @ViewChild

　　   （1）模版变量

　　　  给子组件设定一个Id值，在HTML页面中，直接通过Id值，操作子组件的属性值。 

import {Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-child-component',
  template: `I'm {{ name }}`
})
export class ChildComponent implements OnInit  {
  public name: string;
  constructor() {}
  ngOnInit() {}
}

　　父组件

import {Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component #child></app-child-component>
    <br>
    <button (click)="child.name = childName">设置子组件名称</button>
  `
})

export class ParentComponent implements OnInit {
  private childName: string;
  constructor() { }
  ngOnInit() {
    this.childName = 'jack child';
  }
}

　　(2) @ViewChild

　　　  与模版变量类似，在ts代码里操作子组件的属性值。

　　　　子组件

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

@Component({
  selector: 'app-child-component',
  template: `I'm {{ name }}`
})
export class ChildComponent implements OnInit  {
  public name: string;
  constructor() { }
  ngOnInit() { }
}

 

　　　　父组件

import {Component, OnInit, ViewChild} from '@angular/core';
import { ChildComponent} from './t11';
@Component({
  selector: 'app-parent-component',
  template: `
    <app-child-component #child></app-child-component>
    <br>
    <button (click)="setChildName()">设置子组件名称</button>
  `
})

export class ParentComponent implements OnInit {
  @ViewChild(ChildComponent)
  childCmp: ChildComponent;
  constructor() { }
  ngOnInit() { }
  setChildName() {
    this.childCmp.name = 'give it jack child';
  }
}

 

  (三）RxJS Subject

　　　使用关键词  Observable,Subject,Subscription。

　　　这种方式通过一个 Service 实例作为中央事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括 父子，兄弟，跨级。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class MessageService {
  subject = new Subject<any>();
  getMessage() {
    return this.subject.asObservable();
  }

  sendMessage(msg){
    this.subject.next(msg);
  }

  clearMessage() {
    this.subject.next();
  }
}

子组件

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../service/message.service';
@Component({
  selector: 'app-child',
  template: `
    <div>
        <button (click)="sendMessage()">Send Message</button>
        <button (click)="clearMessage()">Clear Message</button>
    </div>`
})
export class ChildComponent implements OnInit {
  constructor(private messageService: MessageService) {
  }

  ngOnInit() {
  }
  sendMessage(): void {
    this.messageService.sendMessage('hello from child ');
  }

  clearMessage(): void {
    this.messageService.clearMessage();
  }
}

父组件

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../service/message.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <div>
       <div *ngIf="message">{{message}}</div>
       <app-child></app-child>
    </div>
    `,
  providers: [ MessageService]
})

export class ParentTestComponent implements OnInit {
  message;
  subscription = new Subscription();
  constructor(private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe( res => {
      this.message = res;
    });
  }
  ngOnInit() {
    this.subscription.unsubscribe();
  }
}

 

　总结：

　　 从继承关系来看，

　　　　1、 class EventEmitter<T> extends Subject<T> 。

　　　　2、class Subject<T> extends Observable<T> implements SubscriptionLike

　　　　3、Subscription implements SubscriptionLike 

　　　　4、interface SubscriptionLike extends Unsubscribable