如何选择性地显示共享组件的内容答案

【问题标题】：How to selectively display content of a shared component如何选择性地显示共享组件的内容
【发布时间】：2019-12-01 08:31:48
【问题描述】：

我有一个共享组件，它为其他三个组件提供内容。我需要将搜索过滤器添加到三个组件中的两个。我将代码放在共享组件中，因为这是要过滤的信息被呈现的地方。过滤工作正常，但搜索字段显示在所有三个组件上。如何选择仅在选定组件上添加搜索字段？

在主组件（employee.html）中我使用的是共享组件（list）

 <app-list [model]="cards" 
           [emptyMessage]="No Employee"></app-list>

在列表组件中。我添加了搜索框并将搜索过滤器应用于显示员工姓名的 for 循环

<mat-form-field class="search-field">
<ng-content></ng-content>
<mat-icon>search</mat-icon>
<input autofocus matInput #searchTermInput type="search"
     [(ngModel)]="searchTerm" >
</mat-form-field>

//应用搜索过滤器

<div class="empty-view" *ngIf="model && model.length === 0">
{{ emptyMessage }}</div>

<mat-card *ngFor="let item of model | searchFilter:searchTerm">

搜索过滤管道

import {Pipe, PipeTransform} from '@angular/core';
import {Card} from "./card";

@Pipe({
name:'searchFilter'
})
export class SearchFilterPipe implements PipeTransform{
transform(model: Card<any>[], searchTerm:string):Card<any>[]
{
if(!model || !searchTerm){
  return model
}
return model.filter(item 
=>item.title.toLowerCase().indexOf(searchTerm.toLowerCase())!== -1)
}
}

【问题讨论】：

标签： angular components

【解决方案1】：

您可以在共享组件上传递一个布尔变量作为输入，然后在变量上执行 ngIf 以显示搜索（如果为真），然后在父/表示组件上为您不使用的部分传递输入变量上的假'不想显示搜索，对要显示的搜索执行其他操作。这样就解决了

【讨论】：