Как мы можем делиться данными между двумя компонентами - оба являются совершенно отдельными компонентами. (которые не находятся в детско-родительских отношениях)

Question

Как мы можем обмениваться данными между двумя компонентами - оба являются полностью отдельными компонентами? (которые не находятся в отношениях ребенка и родителя)

Я хочу показать значение переменной totalReg моего компонента регистрации в моем компоненте заголовка. Оба файла ниже.

Это мой reg.component.ts

import { Component, Output } from '@angular/core';
import { UserService } from '../services/reg.service';
import { VERSION } from '@angular/core';
@Component({

templateUrl: 'reg.component.html'
})
export class RegComponent {



    constructor(

    private userService: UserService,
    ) { }
@Output() totalReg: any;
register(event: any) {

    this.userService.create(event.target.username.value)
        .subscribe(
            data => {
                this.totalReg = data['data'].userId;
                console.log(this.totalReg); // Navigate to the 
listing aftr registration done successfully

            },
            error => {
                console.log(error);
            });
    }
}

Это мой header.component.ts import {Component, OnInit} из '@ angular / core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Это HTML-код моего заголовочного компонента header.component.html

<div class="container">
<mat-toolbar>  
                <ul class="nav navbar-nav">
                    <li><a [routerLink]="['/login']">Login</a></li>
                    <li><a [routerLink]="['/reg']">Registration</a> 
   </li>
                    <li><a [routerLink]="['/users']">All Users</a> 
   </li>

                </ul>
    </mat-toolbar>
    <span>{{totalReg}}</span>
    </div>

компонент заголовка должен показывать значение totalReg.

Answer 1

вы можете сделать это с помощью класса обслуживания.

вы уже используете UserService в RegComponent, поэтому используйте тот же сервис в HeaderComponent для получения данных.

HeaderComponent.ts

export class HeaderComponent implements OnInit {

  totalReg: any;

  constructor(private service : UserService) { }

  ngOnInit() {
    this.totalReg = this.service.totalRg;
  }

}

RegComponent.ts

export class RegComponent {

@Output() totalReg: any;

constructor(private userService: UserService) { }

register(event: any) {
   this.userService.create(event.target.username.value)
        .subscribe(data => {
               this.totalReg = data['data'].userId;
               console.log(this.totalReg); // Navigate to the listing aftr registration done successfully
               this.service.totalRg = this.totalReg;
            },
            error => {
                console.log(error);
        });
    }
}

вы уже используете класс в классе обслуживания, вам нужно добавить переменную как totalRg

UserService.ts

export class UserService {

  totalRg:any;

  constructor() { }

  create(name: any) {
    return ....//
  }
}