[Angular] component communication in Angula6

This paper mainly introduces component communication in Angular6

I. parent child component communication

1.1 parent component passing information to child component

Method 1: set the properties of the child component on the parent component

Parent component binding information

<app-child childTitle="Sub component title can be set"></app-child>

Message received by subcomponent

import { Component, OnInit, Input } from '@angular/core'; @Input childTitle: string;

Method two the method that the parent component calls the child component

Parent component trigger message

<app-child #child></app-child> <button (click)="child.childPrint()"></button>

Message received by subcomponent

childPrint() { alert("Printing from subcomponents"); }

1.2 sub components passing information to parent components

Method 1 use eventtwitter

Subcomponent uses EventEmitter to deliver messages

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; ... @Output() initEmit = new EventEmitter<string>(); ngOnInit() { this.initEmit.emit("Subcomponent initialization successful"); } ...

Message received by parent component

<app-child (initEmit)="accept($event)"></app-child>

accept(msg:string) { alert(msg); }

Method 2 use ViewChild

Subcomponents provide functions that pass parameters

sendInfo() { return 'Message from child 1.'; }

The parent component triggers and receives information using ViewChild

< button (click) = "getinfo()" > get the information of sub component 1 < / button > <h2>{{ info }}</h2>

import { Component, OnInit, ViewChild } from '@angular/core'; ... @ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent; getInfo() { this.info = this.childcomponent.sendInfo(); }

II. Non parent-child component communication

Method 1 service

Disadvantages: two way triggering (sending / receiving information) is required

service.ts

import { Component, Injectable, EventEmitter } from "@angular/core"; @Injectable() export class myService { public info: string = ""; constructor() {} }

Component 1 passes information to service

import { myService } from '../../service/myService.service'; ... constructor( public service: myService ) { } changeInfo() { this.service.info = this.service.info + "1234"; } ...

Component 2 obtains information from service

import { myService } from '../../service/myService.service'; ... constructor( public service: myService ) { } showInfo() { alert(this.service.info); } ...

Method 2 use BehaviorSubject

Advantages: the real publish and subscribe mode, when the data changes, subscribers can also get response

service

import { BehaviorSubject } from 'rxjs'; ... public messageSource = new BehaviorSubject<string>('Start'); changemessage(message: string): void { this.messageSource.next(message); }

Components call the methods of service to transmit and receive information

changeInfo() { this.communication.changemessage('Message from child 1.'); } ngOnInit() { this.communication.messageSource.subscribe(Message => { window.alert(Message); this.info = Message; }); }

III. other means of communication

Routing value
cookie,session,storage

Reference

Angular6.x learning notes - component communication for component details

Communication between angular6 components