如何使用 service.ts 进行 onclick 隐藏和显示？

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">
        <i class="fa fa-funnel-thin mr-10"></i>
 </button>

内容组件ts：

import {Injectable} from '@angular/core';
  @Injectable({
  providedIn: 'root'
})
export class FilterService {
  constructor(
    public filterService: FilterService) {

  }
}

service.ts:

import {Injectable} from '@angular/core';
  @Injectable({
     providedIn: 'root'
 })
 export class FilterService {
   public filterShow: boolean;

   filterClicked(){
      this.filterShow = !this.filterShow;
   }}

查看组件：

<div *ngIf= "filterService.filterShow">
  content
</div>

查看组件ts：

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

如果有人知道，请在这里分享。我试过了，还是不行。

Answer 1

一些事情。

1. 我认为你在内容组件 ts 中粘贴了错误的代码：

2. 如果你使用

   @Injectable({ providedIn: 'root' })

那你就不需要了

selector: 'jobs-sub-header', 
templateUrl: './sub-header.component.html', 
providers:  [ FilterService ]  <-----------

providedIn:'root' 表示该服务将可用于从根目录开始的所有组件。

1. 我看不到你在哪里定义了 filterShow

   import {Injectable} from '@angular/core';
   @Injectable({
       providedIn: 'root'
   })
   export class FilterService {
   
    filterShow:boolean = false <----------
   
    filterClicked(){
        this.filterShow = !this.filterShow;
    }
   }
   

我想我明白你现在想做什么了。来自 rxjs 的行为主体可能就是你所需要的。

这是一个示例

新服务：

 import { BehaviorSubject } from 'rxjs'
 import {Injectable} from '@angular/core';
 @Injectable({
     providedIn: 'root'
 })
export class FilterService {
   public filterShow: boolean = false

//----------------------------------------------------------------//

private _source = new BehaviorSubject<boolean>(false)
show$ = this._source.asObservable()

//----------------------------------------------------------------//

click(): void {
    this.filterShow = !this.filterShow;
    this._source.next(this.filterShow)
}//click

//----------------------------------------------------------------//

}

使用它。 像你已经做的那样在 Content 和 subContent 中导入它 然后在你的 html 中使用它：

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

服务中的这些行

private _source = new BehaviorSubject<boolean>(false)
show$ = this._source.asObservable()

意味着相同的 show 值将可供所有使用它的组件使用，并且每次更改时都会发出该值（从任何地方）

https://stackblitz.com/edit/angular-7grjub