我们如何在两个组件之间共享数据-两者都是完全独立的组件。 （不属于儿童与父母的关系）

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     从'@ angular / core'导入{Component，OnInit};

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

  constructor() { }

  ngOnInit() {
  }

}

这是我的标头组件header.component.html

的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

您可以在服务等级的帮助下进行此操作。

您已经在 RegComponent 中使用了UserService，因此在 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 ....//
  }
}