时间戳

首页 > 解决方案 > 将组件值传递给标题

angular - 将组件值传递给标题

问题描述

我正在尝试在所有页面上显示的“标题”组件中显示我的项目的“数字”。

页眉组件：

<div class="d-flex flex-column flex-md-row align-items-center px-md-4  bg-brown text-white ">

<h2 class="my-0 mr-md-auto">
<span>Project {{numero}}</span></h2>

<nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-white" href="#">Projects</a>
    <a class="p-2 text-white" href="#">Exit</a>
</nav>

</div>

其他组件（.html）：

<app-header></app-header>
<div>my component</div>

(.ts)

numero: string = "MY NUMERO";

如何从其他组件中填写标题的“编号”？我们应该使用@Input() 吗？

非常感谢您

标签： angulartypescriptcomponents

解决方案

我建议使用Service

  • 声明服务
  export class NumeroService {
    numeroSubject$ = new BehaviorSubject("MY NUMERO")
    numero$: Observable<string> = this.numeroSubject$.asObservable();
    updateNumero(newNumero: string) {
      this.numeroSubject$.next(newNumero)
    }
  }

我们创建一个BehaviorSubject并传递一个值“MY NUMERO”。这将创建一个Observable值为“MY NUMERO”的值。要更新这个值，我们只需将新值传递next()给Subject

  • 然后我们将这个服务注入到HeaderComponent TS
  constructor (private numeroService: NumeroService) {}
  numero$ = this.numeroService.numero$

HTML

  <span>Project {{ numero$ | async }}</span></h2>

我们正在使用async管道订阅Observable

  • 最后，我们将服务注入到我们希望更新的地方numero$
  constructor (private numeroService: NumeroService) {}
  ngOnInit() {
    this.numeroService.updateNumero("NEW NUMERO")
  }

推荐阅读