Question

您好我有两个组件component1 and component2。我有一个值，让我说x，我想将值传递给我的应用程序中的一个组件，两者都没有父子关系或彼此之间的任何关系。如何获得在component1中设置或创建的component2中的值x？我知道我可以使用本地存储设置值并随处获取。除此之外还有其他方法吗？对不起，我是Angular的新手。伙计们好吗？提前致谢。目前我在我的组件1中做了什么：

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

并在我的component2中：

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();
    }

}

现在，要在Component1和Component2之间使用它，您可以执行以下操作。

的Component1：

导入服务，请求它由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);
   }
}

如何将值从一个组件传递到另一个组件Angular 2（没有父子关系）

1 个答案: