Question

我有一个带有路由器插座的主要组件，像这样

<!-- HEADER -->
<div class="header-container">
    <div class="header">
        <div class="logo-container">
            <img class="logo" src="./assets/img/b_logo.png" />
            <img class="logo-text" src="./assets/img/b_text.png" />
        </div>
        <div class="search-container">
            <mat-form-field>
                    <input type="text" matInput placeholder="Ricerca">
                </mat-form-field>
            <mat-icon svgIcon="search"></mat-icon>
        </div>
        <div class="clickable logout" (click)="logout()">
            <h2>Logout</h2>
            <img class="logout-icon" color="primary" src="./assets/img/logout.png"/>
        </div>
    </div>
</div>

<div class="main-container">

    <!-- CONTENT VIEW -->
    <div class="content">
        <router-outlet></router-outlet>
    </div>

</div>

我想过滤其他组件中的某些列表。我已经读过关于将服务与BehaviorSubject一起使用的信息，但是我没有找到有关该操作的详尽示例，并且我不了解它的工作方式。

Answer 1

BehaviorSubject基本上是一种特殊的Observable类型。

这是非常简单的示例

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  public data: BehaviorSubject<number> = 
    new BehaviorSubject(1);

  public updateData = (): void => {
    this.getAsync2();
  }

private getAsync2 = (): void => {
  interval(1000).subscribe(x=> this.data.next(Math.floor(Math.random() * 1000)));
} 

}

StackBlitz App Link

其他组件中的过滤器元素

1 个答案: