搜索功能，去掉关键字空格

实现效果

1、如果没有关键字点击搜索按钮或者是按下搜索键，提示请输入关键字

2、搜索的数据分为四个分类，搜索结果在新页面打开，关键字去除空格

实现代码

api.service.ts 接口：

//按模型全文检索
  commonQuery(moxing, value, pageIndex, pageSize) {
    const url = '/api/cms/cs/v1.0/columncontent/common/query?permission=true'
    const param = {
      "entity": moxing,
      "filter": {
        "and": [{
          "field": "approvalstatus",
          "value": "PUBLISHED",
          "operation": "eq"
        },
        {
          "field": "title",
          "value": value,
          "operation": "like"
        }
      ]
      },
      "sort": {
        "lastmodificationtime": "desc"
      },
      "page": pageIndex,
      "size": pageSize
    }
    return this.http.post(url, param,
      {
        headers: {
          "Cookie": document.cookie
        }
      }
    )
  }

nav-bar.component.html

<input type="text" [(ngModel)]="searchContent" class="search-input form-control form-control-sm"
            style="padding-left: 90px; box-sizing: border-box;" placeholder="请输入关键字" ng-trim="true"
            id="searchText" (keyup.enter)="keydownEvent($event)" (mouseout)="hidden()">
          <a id="searchBtn" class="search-btn fas fa-search"  (click)="dispaly()" (mouseout)="hidden()">
          </a>
          <div id="tips">
            请输入关键字
          </div>

nav-bar.component.scss
请输入关键字的文字提示默认是隐藏的，当没有关键字且搜索的时候用ts展现提示语

#tips {
  position: absolute;
  display: none;
  width: 100px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  background-color: red;
  color: #fff;
  right: -100px;
  top: 0;
  z-index: 100;
  border-radius: 4px;
}

#tips::before {
  position: absolute;
  width: 0;
  height: 0;
  border-right:10px solid red;
  border-bottom:10px solid transparent;
  border-top:10px solid transparent;
  left: -10px;
  content: "";
  top: 5px;
}

nav-bar.component.ts

//鼠标按下实现搜索，angular里面写法(keyup.enter)="keydownEvent($event)"
  keydownEvent(event) {
    this.dispaly()
  }

//控制文字提示语的显隐
  dispaly() {
 	//去除空格
    this.searchContent = this.searchContent.replace(/\s/g, "")
    let tips = document.getElementById('tips')
    let searchBtn = document.getElementById('searchBtn')
    //当输入框的文字
    if (this.searchContent === '' || this.searchContent === null || this.searchContent === undefined || this.searchContent.length > 0 && this.searchContent.trim().length === 0) {
      tips.style.display = 'block'
      searchBtn.setAttribute("href", 'javascript:;')
      searchBtn.removeAttribute('target')
    } else {
      tips.style.display = 'none'
      searchBtn.setAttribute("target", '_blank');
      //如果再html里面写routerLink，鼠标按下的时候没法控制跳转链接，所以把链接拼接到ts文件里
      window.open(`${location.origin}${location.pathname}#/home-list/GroupNews/searchlist?courseId=${this.courseId}&searchContent=${this.searchContent}`, '_blank');
    }
  }

//鼠标移开的时候不显示请输入关键字的提示语
  hidden() {
    let tips = document.getElementById('tips')
    tips.style.display = 'none'
  }

展示搜素数据页

search-list.component.html

<nz-table #basicTable [nzData]="contents" [nzLoading]="loading" [nzHideOnSinglePage]=true [nzPageSize]="12">
            <tbody>
              <tr *ngFor="let content of basicTable.data;let i = index" class="news-list-ul">
                <td>
                  <div class="li-title d-flex">
                    <span class="circle"></span>
                    <span class="li-title-main">
                      <a [routerLink]="'/home-list/GroupNewscontent/content'"
                        [queryParams]="{contentId:content?.id,index:i,columnId:content?.channelCode}"
                        title="{{content.title}}" (click)="addClicks(content?.id,i,content?.channelCode)">
                        {{content.title}}
                      </a>
                    </span>
                  </div>
                </td>
                <td>
                  <div class="li-date">{{content.lastmodificationtime | date:'yyyy-MM-dd':undefined:'en-US'}}</div>
                </td>
              </tr>
          </nz-table>
          <div style="padding:20px 0;" class="d-flex justify-content-center align-items-center">
            <nz-pagination [nzPageIndex]="page" [nzTotal]="total" [nzPageSize]="sizecurrent"
              [nzItemRender]="renderItemTemplate" (nzPageIndexChange)="nzPageIndexChange($event)"
              [nzHideOnSinglePage]=true></nz-pagination>
            <ng-template #renderItemTemplate let-type let-page="page">
              <a *ngIf="type === 'pre'">上一页</a>
              <a *ngIf="type === 'next'">下一页</a>
              <a *ngIf="type === 'page'">{{ page }}</a>
            </ng-template>
          </div>

search-list.component.ts

  ngOnInit() {
    this.route.queryParams.subscribe(data => {
      this.courseId = data.courseId
      //去除关键字中的空格
      this.searchContent = data.searchContent.replace(/\s/g, "")
      this.getQueryData()
    })
  }
  
  //判断空格
  Trim(str, is_global) {
    var result;
    result = str.replace(/(^\s+)|(\s+$)/g, "");
    if (is_global.toLowerCase() == "g") {
      result = result.replace(/\s/g, "");
    }
    return result;
  }
  
  //获取数据
  getQueryData() {
  //当关键字为空的时候不进行查询
    if (this.searchContent === '' || this.searchContent === null || this.searchContent === undefined || this.searchContent.length > 0 && this.searchContent.trim().length === 0) {
      this.loading = false
      return      
    } else {      
      this.loading = true
      this.api.commonQuery(this.courseId, this.searchContent, this.pagecurrent, this.sizecurrent).subscribe(data => {
  	    //当获取数据后停止加载动画
        this.loading = false
          this.contents = data.data
          this.total = data.total
      })
    }
  }

  nzPageIndexChange(size) {
    this.pagecurrent = size;
    this.page = size;
    // 这里必须减1
    this.SkipCount = (size - 1) * this.sizecurrent;
    this.getQueryData()
  }