我有一个HeaderComponent,它显示我有搜索栏的标题,当用户输入某些内容并按enter时,我将用户带到SearchComponent。
我希望实现这样的功能:当用户在搜索页面(SearchComponent)时,头中的searchBar不应该可见,而在所有其他页面上都应该是可见的。
为此,我在HeaderComponent.ts中添加了变量ng-if,在HeaderComponent.html中添加了ng-if,我显示/隐藏了searchBar。
为了更改searchShow的值,我实现了一个Header.service.ts。
header.service.ts
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
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
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
}
}我遗漏了什么?请帮帮忙。谢谢
发布于 2020-07-07 04:55:52
在search.component.ts中您引用
import { HeaderService } from 'src/app/shared/header/header.service.js';
这将导致第二个headerService实例。使用.js后缀应该可以解决这个问题。
https://stackoverflow.com/questions/62768097
复制相似问题