Как выполнить глобальный поиск в Angular 8/9? - PullRequest
Новая
       0

Как выполнить глобальный поиск в Angular 8/9?

0 голосов
/ 26 февраля 2020

Пожалуйста, найдите мой существующий скрипт,

Структура каталогов: 

App/
->Classes
->Components
->Services Index.html

Пример скрипта:

Индекс. html

<html lang="en">
        <head>
        </head>
        <body>

          <app-root></app-root>

        </body>
        </html>

App / 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>

Компонент заголовка TS file: 

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());
      }
   }

Я сталкиваюсь с проблемой при поиске по заголовку, все скрипты фильтра работают отлично, которые записываются в компонент поиска, но поиск по ключевому слову, определенному в компоненте заголовка тогда как выполнить поиск по заголовку.

Оба компонента являются родительскими, нет связи между дочерним и родительским понятием, вы можете просмотреть отношение компонентов в app.component. html file.

Search загрузка страницы по требованию и загрузка страницы нижнего колонтитула при запуске проекта.

Поэтому, пожалуйста, помогите всем, как это сделать лучше.

1 Ответ

1 голос
/ 26 февраля 2020

То, что вы сделали до сих пор, совершенно нормально. Я создал рабочий пример кода, приведенного ниже: 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 Теперь нам осталось подписаться на нашу новую Наблюдаемый. 

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;
     });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...