Question

我有一个标题组件，将在我的项目中的许多模块中使用。它将显示当前视图的标题。

在当前页面组件（client-list-component.ts）中，我调用服务的changeTitle方法来更改标题。我通过VS Code中的断点确认该方法获取了新值，但新值未显示在page-header.component.html中。相反，我看到了服务中设置的默认标题（＆＃34;没有标题集＆＃34;）。

PageHeaderComponent是共享模块的一部分。

我正在使用Angular 5.

客户端一览component.ts

import { Component, OnInit } from '@angular/core';
import { PageHeaderService } from "../../shared/page-header/page-header.service";

@Component({
  selector: 'client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.scss']
})
export class ClientListComponent implements OnInit {

  public hasClients = false;
  public title: string;

  constructor(private data: PageHeaderService) { }

  ngOnInit() {
    this.data.changeTitle("Clients")
  }
}

页面header.service.ts

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

@Injectable()
export class PageHeaderService {

  private titleSource = new BehaviorSubject<string>("No Title Set");
  currentTitle = this.titleSource.asObservable();

  constructor() { }

  changeTitle(title: string) {
    this.titleSource.next(title)
  }

}

页面header.component.ts

import { Component, OnInit } from '@angular/core';
import { PageHeaderService } from "./page-header.service";

@Component({
  selector: 'app-page-header',
  templateUrl: './page-header.component.html',
  styleUrls: ['./page-header.component.scss'],
  providers: [PageHeaderService]
})
export class PageHeaderComponent implements OnInit {

  public showSearch = false;
  public search: string;
  public title;

  constructor(private data: PageHeaderService) { }

  ngOnInit() {
    this.data.currentTitle.subscribe(title => this.title = title);
  }

}

页面header.component.html

<header>
    <div fxFlex fxFlexLayoutAlign="center">
        <div class="title">
            <h1>{{title}}</h1>   
        </div>  
    </div>
</header>

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

import { PageHeaderService } from './page-header/page-header.service';
import { PageHeaderComponent } from './page-header/page-header.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MaterialModule
  ],
  declarations: [
    PageHeaderComponent
  ],
  exports: [
    FormsModule,
    MaterialModule,
    CommonModule,
    PageHeaderComponent
  ],
  providers: [
    PageHeaderService
  ]
})
export class SharedModule { }

Answer 1

您可以尝试在模块中提供PageHeaderService而不是标头组件。

如果您在页眉组件中提供服务，则会为 组件的每个 实例创建PageHeaderService的实例，这可能不是＆＃39; t你想要的东西。

Answer 2

当我们在角度服务上使用多模块时，noly singleton。每个模块都创建一个这个服务的实例，参考： https://angular.io/guide/dependency-injection#singleton-services

Answer 3

当我们在角度服务上使用多模块时，noly singleton。每个模块都创建此服务的实例，参考https://angular.io/guide/dependency-injection#singleton-services

显示Angular服务的更新值

3 个答案: