如何将值从一个组件传递到另一个组件 Angular 2(无父子关系)

Question

嗨，我有两个组件，component1 and component2.我有一个值，假设x，我想将值传递给我的应用程序中的一个组件，两者都没有父子或任何关系。如何获取在组件 1 中设置或创建的组件 2 中的值 x？我知道我可以使用本地存储来设置值并到达任何地方。除此之外，还有其他方法可以做到这一点吗？对不起，我是Angular的新手。知道伙计们吗？提前谢谢。目前我在组件1中所做的工作：

window.localStorage.setItem('myVal', JSON.stringify(x));

在我的组件2中：

let getmyVal: any = JSON.parse(localStorage.getItem("myVal"));

Answer 1

由于组件之间没有关系，最简单的方法是采用发布者-订阅者模型。任何组件都可以发布任何消息，任何其他组件都可以使用 Observable 订阅所述消息。

下面是我们在其中一个应用程序中创建的示例警报服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class AlertService {
    private subject = new Subject<any>();
        
    constructor() {
    }
    alert(alertType: string, objData: any) {
        this.subject.next({ type: alertType, data: objData });
    }
    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

现在，要在组件 1 和组件 2 之间使用它，您可以执行以下操作。

组件 1：

1. 导入服务，要求它由 Angular 注入并使用它。下面是组件 1 的代码。

import { Component} from "@angular/core";
import { AlertService } from "../../../services/common/alert.service";
@Component({
    selector: 'c1',
    templateUrl: 'app/components/controls/Note/ComponentOne.component.html'
})
export class ComponentOne implements OnInit {
    
    constructor(private _alertService: AlertService) { 
    }
    
    AlertMyMessage(): void {
        this._alertService.alert("SampleAlertType", "ComponentOneAlert");
    }   
}

构成部分2：

现在，组件 2 订阅消息。这是代码：

import { Component, OnInit} from "@angular/core";
import { AlertService } from "../../../services/common/alert.service";
@Component({
    selector: 'C2',
    templateUrl: 'app/components/ComponentTwo.component.html'
})
export class ComponentTwo implements OnInit {
constructor(private _alertService: AlertService) {
    }
    
    //Subscribing to the alert service on component initialization by providing an handler.
 ngOnInit(): void {
        this._alertService.getMessage().subscribe(data => this.alertReceived(data));
    }
    
    //This method is the event handler. 
   private alertReceived(data: any) {
   console.log(data.data);
   }
}