Angular 以不同的角度分量显示数据

有人能给我一个工作示例（或让我参考一个）用角度说明此功能：

组件A：从服务器获取数据（用户在输入字段中输入一个单词，服务器以某种定义进行响应）

组件B：从服务器接收的数据将显示在此组件中

一、 由于某些原因，无法将数据显示在从服务器获取数据的组件之外的其他组件中

更多详情：我在这里发布了问题：

---

我有一个在组件之间共享数据的服务，但我的问题是如何将从服务器接收到的数据从组件a传递到组件B？

试试这个

import { Injectable } from '@angular/core';
import {of, BehaviorSubject, Observable} from 'rxjs'

@Injectable()
export class DataService {
  private _data: BehaviorSubject<any> = new BehaviorSubject<any>(null)

  constructor() { }

  getData(): Observable<any> {
    return this._data.asObservable();
  }

  setData(data: any) {
    this._data.next(data);
  }

  getSomeData() {
    return of([
      {id: 1, name: 'Name 1'},
      {id: 2, name: 'Name 2'},
      {id: 3, name: 'Name 3'},
    ]);
  }

}

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  @Output() dataLoaded: EventEmitter<any> = new EventEmitter<any>();

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getSomeData().subscribe(
      (data: any) => {
        // use this to emit data to a parent component
        this.dataLoaded.emit(data);

        // use this to set data in the service that other components can subscribe to
        this.dataService.setData(data);
      }
    );
  }

}

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private _data: any[] = [];

  get data(): any[] {
    return this._data;
  }

  set data(data: any[]) {
    this._data = data;
  }
}

import { Component, OnInit } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data: any) => this.data = data
    );
  }

}

导入模块

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

制造对象

  @Output() arrayList = new EventEmitter();

从第一个组件发出数据

this.arrayList.emit(yourdata);

</app-header (arrayList)='displayChanges($event)'></app-header>

displayChanges($firstComponentData){
  var yourData= firstComponentData;
  //your code
}

您需要在html文件顶部的其他组件（第二个组件）中写入这一行

---

这就是服务的目的

服务被实例化一次，并且永远不会被删除。当您通过依赖项注入将它们插入到组件中时，您总是得到相同的实例

把它想象成一个单身汉。

---

您可以将数据保存在服务内的变量中。组件A和组件B可以访问它，并且您可以确定访问的数据在两个组件中是相同的。

从角度文档中，可以使用以下方法在组件之间共享数据：

文档中的第三个示例显示了父级和子级之间的通信，因此这里是两个同级组件通过服务共享数据的示例

首先，使用

行为主题设置服务。这允许组件向服务推送数据并从服务获取数据

数据服务.ts

import { Injectable } from '@angular/core';
import {of, BehaviorSubject, Observable} from 'rxjs'

@Injectable()
export class DataService {
  private _data: BehaviorSubject<any> = new BehaviorSubject<any>(null)

  constructor() { }

  getData(): Observable<any> {
    return this._data.asObservable();
  }

  setData(data: any) {
    this._data.next(data);
  }

  getSomeData() {
    return of([
      {id: 1, name: 'Name 1'},
      {id: 2, name: 'Name 2'},
      {id: 3, name: 'Name 3'},
    ]);
  }

}

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  @Output() dataLoaded: EventEmitter<any> = new EventEmitter<any>();

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getSomeData().subscribe(
      (data: any) => {
        // use this to emit data to a parent component
        this.dataLoaded.emit(data);

        // use this to set data in the service that other components can subscribe to
        this.dataService.setData(data);
      }
    );
  }

}

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private _data: any[] = [];

  get data(): any[] {
    return this._data;
  }

  set data(data: any[]) {
    this._data = data;
  }
}

import { Component, OnInit } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data: any) => this.data = data
    );
  }

}

在
AppComponent
中，设置变量
data
，以保存从
FirstComponent
发出的数据

应用程序组件.ts

import { Injectable } from '@angular/core';
import {of, BehaviorSubject, Observable} from 'rxjs'

@Injectable()
export class DataService {
  private _data: BehaviorSubject<any> = new BehaviorSubject<any>(null)

  constructor() { }

  getData(): Observable<any> {
    return this._data.asObservable();
  }

  setData(data: any) {
    this._data.next(data);
  }

  getSomeData() {
    return of([
      {id: 1, name: 'Name 1'},
      {id: 2, name: 'Name 2'},
      {id: 3, name: 'Name 3'},
    ]);
  }

}

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  @Output() dataLoaded: EventEmitter<any> = new EventEmitter<any>();

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getSomeData().subscribe(
      (data: any) => {
        // use this to emit data to a parent component
        this.dataLoaded.emit(data);

        // use this to set data in the service that other components can subscribe to
        this.dataService.setData(data);
      }
    );
  }

}

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private _data: any[] = [];

  get data(): any[] {
    return this._data;
  }

  set data(data: any[]) {
    this._data = data;
  }
}

import { Component, OnInit } from '@angular/core';

import {DataService} from '../data.service';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data: any) => this.data = data
    );
  }

}

然后在应用程序组件模板中侦听
dataLoaded
事件，并设置应用程序组件的数据

app.component.html

<app-first (dataLoaded)="data = $event"></app-first>

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let item of data">
      <td >{{ item?.id }}</td>
      <td >{{ item?.name }}</td>
    </tr>
  </tbody>
</table>

SecondComponent
现在可以在其模板中使用从
FirstComponent
加载的数据

second.component.html

<app-first (dataLoaded)="data = $event"></app-first>

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let item of data">
      <td >{{ item?.id }}</td>
      <td >{{ item?.name }}</td>
    </tr>
  </tbody>
</table>


身份证件
名称
{{item？.id}
{{item？.name}
查看有关组件交互的角度文档。如果组件具有父/子关系，则可以使用@Input（）和@Output（）。如果组件具有同级关系（它们位于同一父组件中），则可以使用服务在它们之间传递数据。文档中有这两种方法的示例。我知道我在使用服务：我的问题是如何具体地将数据从组件a传递到组件B，同时在组件B中显示数据？我想这是兄弟姐妹之间的关系。奥马尔，在这之前你使用过EventEmitter吗？Kashif，不，我以前没有使用过EventEmitter，但我将按照教程学习基本知识。嗨，josavish，我将实施你的解决方案，并让你知道结果。谢谢