首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >behaviorSubject next()不工作角8

behaviorSubject next()不工作角8
EN

Stack Overflow用户
提问于 2020-07-07 04:22:55
回答 1查看 4.6K关注 0票数 1

我有一个HeaderComponent,它显示我有搜索栏的标题,当用户输入某些内容并按enter时,我将用户带到SearchComponent

我希望实现这样的功能:当用户在搜索页面(SearchComponent)时,头中的searchBar不应该可见,而在所有其他页面上都应该是可见的。

为此,我在HeaderComponent.ts中添加了变量ng-if,在HeaderComponent.html中添加了ng-if,我显示/隐藏了searchBar。

为了更改searchShow的值,我实现了一个Header.service.ts

header.service.ts

代码语言:javascript
复制
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class HeaderService {
  showSearch = new BehaviorSubject<boolean>(true);
  public showSearchObservable = this.showSearch.asObservable()
  constructor(){}
}

header.component.ts

代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';
import { HeaderService } from './header.service';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  searchShow;
  constructor(
    private headerService: HeaderService
  ) {}

  ngOnInit() {
    this.headerService.showSearchObservable.subscribe(
      value => {
        this.searchShow = value
        console.log(value) ##==> prints true first time when header is initialized but does not prints anything when search component is loaded
      }
    )
  }
}

search.component.ts

代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';
import { HeaderService } from 'src/app/shared/header/header.service.js';
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
 constructor(
    private headerService: HeaderService
  ) {}

  ngOnInit() {
    console.log(this.headerService.showSearch.value) ##==> prints true
    this.headerService.showSearch.next(false)
    console.log(this.headerService.showSearch.value) ##==> prints false, but this value is not emitted to header component
}
}

我遗漏了什么?请帮帮忙。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-07 04:55:52

在search.component.ts中您引用

import { HeaderService } from 'src/app/shared/header/header.service.js';

这将导致第二个headerService实例。使用.js后缀应该可以解决这个问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62768097

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档