使用另一个模板中的字段 Angular 5

Question

我有一个组件 class，我在其中存储点击数据。如果单击该按钮，我会将数据存储在一个空数组中。 clickedData = []

我需要在不同的模板中使用此 clickedData。和 <div *ngIf ="clickedData">。怎么做到的？

Answer 1

1)您必须为此使用共享服务。

sharedService.ts

export class sharedservice(){
  public clickData: any[] = [];

  store(data){
    this.clickData=data;
  }

  getData(){
    return this.clickData;
  }
}

2) 在根模块中导入并注册服务。

import {sharedservice} from 'relativepath';

  NgModule({
     imports:[...]
     ...
     providers: [sharedservice]
  })

3) 在目标组件中注入服务。

import {sharedservice} from 'relativepath';

export class AppComponent{
   constructor(private ss: sharedservice){}
}

4) 如图所示在模板中使用 ss 变量（例如 appcomponent.html）

   <button (click)="ss.store(whatever_data_you_want_to_store)"> save </button>

5) 在其他组件 html 中，如下使用，

<div *ngFor="let item of ss.getData()">...</div> //don't forget to inject into constrictor

使用另一个模板中的字段 Angular 5

Use field in another templete with Angular 5

angular

angular5