如何使用Service.ts在角度不同的组件中进行单击隐藏和显示?

Question

在我的项目中，我有两个组件，如内容和视图。我正在使用service.ts来连接(扩展(这两个组件。在内容组件中，我有一个方法。当我调用该方法时，一个div 将显示在视图组件中。两者都使用 Service.ts 进行交互。我尝试了布尔方法，但它不起作用。

内容组件：

<button (click)="filterService.filterClicked()"
[class.active]="filterService.filterChanged"
id="filterDropdown" type="button"
class="dropdown-toggle btn btn-clear-default job-filter">
Filter Test</button>

内容组件 ts：

import { Component } from '@angular/core';
import { FilterService } from './filter-service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
constructor(
public filterService: FilterService) {
}}

service.ts：

import { BehaviorSubject } from 'rxjs'
import {Injectable} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilterService {
public filterShow: boolean = false
constructor() {
}
private _source = new BehaviorSubject<boolean>(false)
show$ = this._source.asObservable()
filterClicked() {
this.filterShow = !this.filterShow;
this._source.next(this.filterShow)
}}

视图组件：

<h3 *ngIf="filterService.show$ | async">Show data</h3>

查看组件 TS：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FilterService } from "./filter-service";
@Component({
selector: 'jobs-sub-header',
templateUrl: './sub-header.component.html'
})
export class SubHeaderComponent {
constructor(
public filterService: FilterService) {}
}

当我在内容组件中单击 filterClicked(( 时，在视图组件中，内容应该显示和隐藏。 但它对我不起作用。我不知道我在哪里错过了什么？

Answer 1

如果它显示 false，则您更新值的方式存在问题。 尝试将值传递给next((，而不是在服务中声明的值

import { BehaviorSubject } from 'rxjs'
import {Injectable} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilterService {
constructor() {
}
private _source = new BehaviorSubject<boolean>(false)
show$ = this._source.asObservable()
filterClicked(value) {
this._source.next(value)
}}

然后只需在需要单击的内容组件中创建一个切换功能

show: boolean;
subscription: Subscription;
constructor(private FilterService) {
}
ngOnInit() {
this.subscription = this.FilterService.subscribe(r => this.show = r)
}
toggle() {
this.FilterService.filterClicked(!this.show)
}
ngOnDestroy() {
this.subscription.unsubscribe()
}

然后替换内容组件中的单击功能

<button (click)="toggle()"
[class.active]="show"
id="filterDropdown" type="button"
class="dropdown-toggle btn btn-clear-default job-filter">
Filter Test</button>