Question

我需要引用服务中的变量。服务中的变量也可以由另一个组件中的另一个函数更改。这很难解释所以让我告诉你。

SharedService;

@Injectable()
export class SharedService {

    sharedpages = {
        items: [
                {id: "1", link: "", text: "Epiaş", parent: "0", active: false, tabbed: false},
                {id: "T001", link: "T001", text: "T001 | Abone Bul", parent: "1", active: false, tabbed: false},
               ],
            getAll:  () => {
                return this.sharedpages.items;
            }
        };
    }

AppComponent;

export class AppComponent {
  public pages;

  constructor(public SharedService: SharedService) {
// The code below just takes sharedpages from sharedservice once then it doesn't takes updates of the sharedpages.
        this.pages = SharedService.sharedpages.getAll();

//The code below also doesn't work
        this.pages = SharedService.sharedpages.items;
      }
    }

每当SharedService的sharedpages发生变化时，我想从AppComponent更新页面变量。

例如来自另一个组件的其他一些函数将sharedpages.items更改为空白数组。当发生这种情况时，我想让页面变量从Appcomponent变为空白数组。

这有什么解决方案吗？谢谢......

Answer 1

您可以使用Observables/Subscription。在更新任何组件中的服务变量时，请说

updateSharedPages() { // your logic to update goes here }

调用触发更改的方法。这是使用BehaviorSubject或Subject完成的，具体取决于您的使用案例。我们来一个变量（在您的服务中）

updateSharedModelSubject = new Behavior subject<boolean>(true);

然后

triggerSharedModelChange() { this.updateSharedModelSubject.next(this.sharedpages); }

然后，您可以在任何组件中的任何位置订阅此内容。

Answer 2

试试这个：

@Injectable()
export class SharedService {

public pagesChanged$: ReplaySubject<any> = new ReplaySubject<any>(1);
sharedpages = {
    items: [
            {id: "1", link: "", text: "Epiaş", parent: "0", active: false, tabbed: false},
            {id: "T001", link: "T001", text: "T001 | Abone Bul", parent: "1", active: false, tabbed: false},
           ],
        getAll:  () => {
            return this.sharedpages.items;
        }
    };
}

AppComponent;

export class AppComponent implements OnInit {
 public pages;

 constructor(public sharedService: SharedService) {}

ngOnInit() {
    this.sharedService.pagesChanged$.subscribe(data => {
        this.pages = data;
    });
}

}

在您更改页面的组件中，发出新值

export class AnotherComponent {

 constructor(public sharedService: SharedService) {}

onPageChange() {
    this.sharedService.pagesChanged$.next(null); // Emits null as new value
}

}

添加了一个工作示例 https://ng-run.com/edit/1zZGSvohchUeEG8dacXt?open=app%2Fanother.component.ts&layout=2

Answer 3

您需要导入Inject on Service

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

@Injectable()
export class SharedService {

并导入您的组件

import { SharedService } from './SharedService ';
export class AppComponent {
   console.log(SharedService.sharedpages);

将组件的变量绑定到服务

3 个答案: