Question

我最近开始使用Angular 2进行开发。现在我只是在玩一个测试项目，而不是真正的应用程序来更好地理解。

我现在有很多问题和误解。

主要问题是组件之间的沟通。这对我来说真的很痛苦。

考虑以下示例

我有客户列表，我还需要在用户点击列表项时显示有关客户的信息。

像Master-Detail常见模式这样的简单任务，但我还需要点击客户端描述中应该触发创建/更改其他组件的链接。 客户端组件

import {Component, Input} from "@angular/core";
@Component({
    selector: 'clients',
    templateUrl: 'app/clients/client.component.html'
})
export class ClientComponent {
}

客户端HTML组件

<div id="sidebar" class="col-sm-3 client-sidebar">
    <h2 class="sidebar__header">
        Client list
    </h2>
    <div class="sidebar__list">
        <router-outlet name="client-list"></router-outlet>
    </div>
</div>
<div id="client-info" class="col-sm-9 client-info">
        <router-outlet name="client-details"></router-outlet>
</div>

CLient list component

import {Component} from "@angular/core";
import {Client} from "../client-details/model/client.model";
import {ClientService} from "../../services/client.service";
import {Router} from "@angular/router";
import {SharedService} from "../../services/shared.service";
@Component({
    selector: 'bank-app',
    templateUrl: 'app/clients/client-list/client-list.component.html',
})
export class ClientListComponent {
    clients: Array<Client> = [];

    constructor(private clientService: ClientService,
                private router: Router,
                private _sharedService: SharedService) {
    }

    ngOnInit() {
        this.getClients().subscribe((clients) => {
            this.clients = clients;
            this._sharedService.emitClientsChange(clients);
        });
    }

    onClientClick(client: Client) {
        this._sharedService.emitClientClickChange(client);
    }

    getClients() {
        return this.clientService.getClients();
    }
}

客户详细信息组件

import {Component} from "@angular/core";
import {SharedService} from "../../services/shared.service";
import {Router} from "@angular/router";
import {ClientService} from "../../services/client.service";
@Component({
    selector: 'bank-app',
    templateUrl: 'app/clients/client-details/client-details.component.html',
})
export class ClientDetailsComponent {
    constructor(private clientService: ClientService,
                private router: Router,
                private _sharedService: SharedService) {
    }
    ngOnInit() {
        this._sharedService.clientClickChange.subscribe((client) => {
            // Render client details
            console.log("Client CLICK");
            console.log(client);
        });
    }

}

共享服务

import {Injectable} from "@angular/core";
import {Subject} from "rxjs/Subject";
import {Client} from "../clients/client-details/model/client.model";
@Injectable()
export class SharedService {
    // Observable string sources
    private clientsChangeSource = new Subject<Array<Client>>();
    private clientClickSource = new Subject<Client>();
    // Observable string streams
    clientsChange = this.clientsChangeSource.asObservable();
    clientClickChange = this.clientClickSource.asObservable();
    // Service message commands
    emitClientsChange(change: Array<Client>) {
        this.clientsChangeSource.next(change);
    }
    emitClientClickChange(change: Client) {
        this.clientClickSource.next(change);
    }
}

我的组件层次结构正在跟随。

----------AppComponent-----------------
                |
----------Client Component-------------
         |              |   
-----Client List-----Client Details------------
                    |              |         |
--------------- Details---------Accounts--Account Info-----

我发现共享服务被用作通信问题的通用解决方案。但...... 它有效，但对我个人而言，它看起来像意大利面条。组件之间的通信是不可能的，如果它们是使用选择器在父组件中静态硬编码的话。但在我的情况下，这不起作用，所以我使用Shared Service，它将来会大幅增长。 Shared Service提醒我在Java等其他语言中使用静态变量。

使用这种方法是否可以，或者可能还有另一种优雅方法可以做到这一点？

如果有任何帮助，我将不胜感激。

Answer 1

您可以使用共享服务在组件之间进行通信

示例服务

import { Injectable} from '@angular/core';  

    @Injectable()
    export class userDataService {  
       list:any;
       getUserData(){ 
          return this.list; 
       } 
       setUserData(data:any[]){
           this.list = data;
       }
    }

第一个组件

constructor(private _userData: userDataService){
    this.list = [{name:'Prashobh',age:'25'}]
    this._userData.setUserData(this.list);
   }

第二部分

fetchDataFromService(){
   this.list = this._userData.getUserData();
}

More info

对于父/子数据共享或制作可重复使用的组件并共享数据检查this link

共享服务，组件通信Angular 2

1 个答案: