请找到我现有的脚本，
目录结构:
App/
->Classes
->Components
->Services Index.html
脚本示例:
索引.html
<html lang="en">
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
应用程序/app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { environment } from 'src/environments/environment';
// Datepicker module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { OwlModule } from 'ngx-owl-carousel';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { HomeComponent } from './components/home/home.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
OwlModule,
CarouselModule.forRoot(),
BrowserAnimationsModule,
BsDatepickerModule
],
providers: [CookieService, Title, { provide: 'BASE_API_URL', useValue: environment.baseUrl}],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {}
}
app.component.html
<div class="page-wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
标题组件 HTML:
<header class="site-header">
<div class="container">
<div class="align-items-center row">
<div class="col-lg-3">
<div class="logo">
<a [routerLink]="['/']">
<img src="assets/images/deluxify-logo.png" alt="Deluxify">
</a>
</div>
</div>
<div class="col-lg-9">
<div class="headertopright">
<nav class="main-navigation">
<ul class="menu">
<li><a [routerLink]="['categories']">Discover</a></li>
<li><a [routerLink]="['how-it-works']">How It Works</a></li>
<li><a [routerLink]="['faq']">FAQ</a></li>
<li><a [routerLink]="['contact']">Contact</a></li>
</ul>
</nav>
<div class="searchbox">
<div class="txtdiv">
<input type="text"
placeholder="Search"
name="search" class="searchfield"
autocomplete="off"
>
</div>
<div class="selectDiv">
<select id="head_category">
<option value="bags">Bags</option>
<option value="jewellery">Jewellery</option>
<option value="sunglasses">Sunglasses</option>
<option value="watches">Watches</option>
</select>
</div>
</div>
<a href="javascript:void(0)" class="togglemenu menu-trigger">
<span></span>
<span></span>
<span></span>
</a>
<a [routerLink]="['/','category', 'bags']" class="togglesearch searchicon"></a>
</div>
</div>
</div>
</div>
</header>
header 组件 TS 文件:
import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
搜索组件ts
import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core';
import { Params, Router, ActivatedRoute } from '@angular/router';
import {switchMap} from 'rxjs/operators';
import { Options, ChangeContext, PointerType, LabelType } from 'ng5-slider';
import { ProductService } from './../../services/product.service';
import { CategoryService } from './../../services/category.service';
import { NgxSpinnerService } from 'ngx-spinner';
declare var jQuery: any;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
filterOptions:any = {};
products: any;
notEmptyPost = true;
notscrolly = true;
isCatLoaded = false;
dataLength: any;
catname: any;
error: {};
config: any;
brandArr: any[] = [];
idealforArr: any[] = [];
shapeArr: any[] = [];
framecolorArr: any[] = [];
typeArr: any[] = [];
colorArr: any[] = [];
meterialArr: any[] = [];
sizeArr: any[] = [];
styleArr: any[] = [];
stoneArr: any[] = [];
weightArr: any[] = [];
occasionArr: any[] = [];
framesizeArr: any[] = [];
lenscolorArr: any[] = [];
frame_typeArr: any[] = [];
frame_materialArr: any[] = [];
strap_materialArr: any[] = [];
strap_colorArr: any[] = [];
dial_colorArr: any[] = [];
dial_ShapeArr: any[] = [];
constructor(
private ProductService: ProductService,
private CategoryService: CategoryService,
private route: ActivatedRoute,
private router: Router,
private spinner: NgxSpinnerService) {
this.config = {
currentPage: 1,
itemsPerPage: 16,
totalItems: 0,
filterPerms: {}
};
this.config.filterPerms.slug = this.route.snapshot.paramMap.get('slug')? this.route.snapshot.paramMap.get('slug') : 'bags';
}
priceSliderMinValue: number = 100;
priceSliderMaxValue: number = 9999;
options: Options = {
floor: this.priceSliderMinValue,
ceil: this.priceSliderMaxValue,
step: 10,
// showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return '$' + value;
case LabelType.High:
return '$' + value;
default:
return '$' + value;
}
}
};
onPriceChangeEnd(changeContext: ChangeContext): void {
this.config.filterPerms.min_price = changeContext.value;
this.config.filterPerms.max_price = changeContext.highValue;
this.resetLoadMore();
this.getProducts();
}
value: number = 1;
highValue: number = 10;
optionsdistance: Options = {
floor: 1,
ceil: 10,
step: 1,
showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return value + 'KM';
case LabelType.High:
return value + 'KM';
default:
return value + 'KM';
}
}
};
brandChecked(event){
let sCriteriaStr = event.target.name;
let sCriteria = sCriteriaStr.replace("chk_", "");
if (sCriteria === 'brand') {
this.config.filterPerms.brand = this.findSearchableString(event, this.brandArr, sCriteria);
}
if (sCriteria === 'idealfor') {
this.config.filterPerms.idealfor = this.findSearchableString(event, this.idealforArr, sCriteria);
}
if (sCriteria === 'shape') {
this.config.filterPerms.shape = this.findSearchableString(event, this.shapeArr, sCriteria);
}
if (sCriteria === 'framecolor') {
this.config.filterPerms.framecolor = this.findSearchableString(event, this.framecolorArr, sCriteria);
}
if (sCriteria === 'type') {
this.config.filterPerms.type = this.findSearchableString(event, this.typeArr, sCriteria);
}
if (sCriteria === 'color') {
this.config.filterPerms.color = this.findSearchableString(event, this.colorArr, sCriteria);
}
if (sCriteria === 'meterial') {
this.config.filterPerms.meterial = this.findSearchableString(event, this.meterialArr, sCriteria);
}
if (sCriteria === 'size') {
this.config.filterPerms.size = this.findSearchableString(event, this.sizeArr, sCriteria);
}
if (sCriteria === 'style') {
this.config.filterPerms.style = this.findSearchableString(event, this.styleArr, sCriteria);
}
if (sCriteria === 'stone') {
this.config.filterPerms.stone = this.findSearchableString(event, this.stoneArr, sCriteria);
}
if (sCriteria === 'weight') {
this.config.filterPerms.weight = this.findSearchableString(event, this.weightArr, sCriteria);
}
if (sCriteria === 'occasion') {
this.config.filterPerms.occasion = this.findSearchableString(event, this.occasionArr, sCriteria);
}
if (sCriteria === 'framesize') {
this.config.filterPerms.framesize = this.findSearchableString(event, this.framesizeArr, sCriteria);
}
if (sCriteria === 'lenscolor') {
this.config.filterPerms.lenscolor = this.findSearchableString(event, this.lenscolorArr, sCriteria);
}
if (sCriteria === 'frame_type') {
this.config.filterPerms.frame_type = this.findSearchableString(event, this.frame_typeArr, sCriteria);
}
if (sCriteria === 'frame_material') {
this.config.filterPerms.frame_material = this.findSearchableString(event, this.frame_materialArr, sCriteria);
}
if (sCriteria === 'strap_material') {
this.config.filterPerms.strap_material = this.findSearchableString(event, this.strap_materialArr, sCriteria);
}
if (sCriteria === 'strap_color') {
this.config.filterPerms.strap_color = this.findSearchableString(event, this.strap_colorArr, sCriteria);
}
if (sCriteria === 'dial_color') {
this.config.filterPerms.dial_color = this.findSearchableString(event, this.dial_colorArr, sCriteria);
}
if (sCriteria === 'dial_Shape') {
this.config.filterPerms.dial_Shape = this.findSearchableString(event, this.dial_ShapeArr, sCriteria);
}
this.resetLoadMore();
this.getProducts();
}
findSearchableString(event, checkedArr, filterOptionKey){
let tVal = event.target.value;
if(event.target.checked) {
checkedArr.push(tVal);
}
else {
for(var i=0 ; i < this.filterOptions[filterOptionKey].length; i++) {
if(checkedArr[i] === tVal) {
checkedArr.splice(i,1);
}
}
}
return checkedArr.join('~');
}
onDateChange(event) {
if (event) {
var dtEvent = new Date(event);
let date = JSON.stringify(dtEvent)
date = date.slice(1,11);
if (date) {
this.config.filterPerms.availability_date = date;
this.resetLoadMore();
this.getProducts();
}
}
}
// pageChanged(event) {
// this.config.currentPage = event;
// }
getFilterOptions() {
return new Promise((resolve, reject) => {
this.route.params.pipe(
switchMap((params: Params) => this.CategoryService.getCategoryBySlug(this.config.filterPerms.slug)
)
).subscribe((res: any) => {
this.config.filterPerms.category = res.records;
this.isCatLoaded=true;
if (this.config.filterPerms.category[0].id) {
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterOptions(this.config)
)
).subscribe((res: any) => {
this.filterOptions = res;
this.priceSliderMinValue = this.filterOptions.min;
this.priceSliderMaxValue = this.filterOptions.max;
resolve();
});
}
});
});
}
getProducts() {
this.spinner.show();
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)
).subscribe((res: any) => {
if (!res.success) {
console.log("Error found in fetching data!");
} else {
this.spinner.hide();
this.products = res.records;
}
});
}
sortBy(sort_by) {
this.config.filterPerms.sort_by = sort_by.target.value;
if (sort_by) {
this.resetLoadMore();
this.getProducts();
}
}
resetLoadMore() {
this.config.filterPerms.lastPostId = '';
this.config.filterPerms.curNumRec = '';
}
onScroll() {
if (this.notscrolly && this.notEmptyPost) {
this.spinner.show();
this.notscrolly = false;
this.loadNextPost();
}
}
// load th next 6 posts
loadNextPost() {
if (this.isCatLoaded && this.products) {
const lastPost = this.products[0];
//this.config.filterPerms.lastPostId = lastPost.id;
this.config.filterPerms.curNumRec = this.products.length;
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)).subscribe((res: any) => {
this.spinner.hide();
if (res.records.length === 0 ) {
this.notEmptyPost = false;
}
this.products = this.products.concat(res.records);
this.notscrolly = true;
});
}
}
ngOnInit() {
this.getFilterOptions().then(res => this.getProducts());
}
}
我在从 header 搜索时遇到问题，所有过滤器脚本都完美执行，这些脚本在搜索组件中编写，但按 header 组件中定义的关键字搜索，然后如何从 header 执行搜索。
两个组件都是父组件，子组件和父组件之间没有关系，您可以在 app.component.html 文件中查看组件关系。
启动项目时按需加载搜索页面和页眉页脚页面。
所以请帮助任何人如何以更好的方式做到这一点。
最佳答案
到目前为止你所做的一切都很好。我创建了以下代码的工作示例:https://stackblitz.com/edit/angular-khwjt3?file=src%2Fapp%2Fapp.component.ts
<小时/>首先，需要添加一个新服务。此服务会将所有搜索输入事件转发到应用程序中监听它的任何内容。
@Injectable({
providedIn: 'root'
})
export class GlobalSearchService {
public searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>(null);
}
HeaderComponent.html向您的搜索框添加新的输入事件
<input (input)="onInput($event)" type="text" placeholder="Search" name="search" class="searchfield" autocomplete="off" >
HeaderComponent.ts为其添加事件监听器
public onInput(event: any){
// this pushes the input value into the service's Observable.
this.globalSearchService.searchTerm.next(event.target.value);
}
Product Component.ts 现在我们只需订阅新的 Observable 即可。
ngOnInit(){
// this listens to the input value from the service and does something on change.
this.globalSearchService.searchTerm.subscribe((newValue: string) => {
// this is where you would apply your existing filtering.
this.searchTerm = newValue;
});
}
关于javascript - 如何在 Angular 8/9 中进行全局搜索？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60408547/