Question

我有一个无序列表，可以根据用户输入显示搜索建议。 showSuggestion是一个布尔变量，具体取决于我将隐藏还是显示建议列表。从组件方法onClickListItem，当用户单击列表项之一时，路由到产品/ id路由。

到目前为止一切都很好。当输入失去焦点时，我需要隐藏列表。我尝试使用（聚焦）和（模糊）事件处理程序，例如

<input ......  (focusout)= "showSuggestion=false" >

通过上述方法，我无法路由到product /：id，当输入失去焦点时，列表元素将被隐藏。

search.component.html

<form class="custom-search-form">
  <input type="text" autocomplete="off" placeholder="Search.." name="search"
    (input)="onSearchChange($event.target.value)">
  <button type="submit">Search</button>
</form>
<ul class="custom-search-list" *ngIf="showSuggestion">
  <li *ngFor="let item of suggestions" (click)="onClickListItem(item)">
    <img [src]="item.game_thumbnail" class="search-thumbnail">
    {{item.game_name}}
  </li>
</ul>

search.component.ts

import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import { GamesService } from 'src/app/services/games.service';
import { Router } from '@angular/router';

@Component({
  selector: 'sharp-search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.scss']
})

export class SearchBoxComponent implements OnInit {

  showSuggestion=false;

  constructor(private route: Router) { }

  onSearchChange(value) {
      // Code block to show search suggestion from service
  }

  onClickListItem(item) {
    this.route.navigate(['/product',item._id])
  }

  ngOnInit(): void {
  }

}

简而言之，我要做的是隐藏建议列表，当输入失去焦点时，单击页面上的任意位置（用户单击项目列表时除外）。当用户单击任何项目列表时，应该上面的代码行没有出现的指向产品/ id的路由

角度：输入失去焦点时隐藏<ul>

0 个答案: