[Angular] component communication in Angula6

Angula6? Component communication

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

  1. Routing value
  2. cookie,session,storage

Reference

Angular6.x learning notes - component communication for component details

Communication between angular6 components

Tags: Javascript angular Session

Posted on Mon, 02 Dec 2019 00:55:46 -0500 by the_crazyman