Question

这是我的customer.component.html。我正在使用此组件将json数据显示为联系人列表

   <mat-card class="example-card" *ngFor="let filteredScreen of filteredScreens; index as i"   [ylbHigh]="color">
            <mat-card-header >
                <div mat-card-avatar class="example-header-image" >
                    <img mat-card-image class="list-img" src="{{filteredScreen?.img}}" >
                </div>
                <mat-card-title  [innerHTML]="filteredScreen.name | highlight: name"  [ylbHighlight]="color">
                        <p class="names" [ylbHighlight]="color">{{   filteredScreen?.name }}</p>
                </mat-card-title>

            </mat-card-header>
        </mat-card>

如果我单击到特定列表项，则在我的列表中，其背景颜色和文本颜色正在更改，如下图所示

我使用了两个directives来更改背景颜色和文本颜色，如下所示

high.directive.ts

    import {  Directive, ElementRef, HostListener,Input } from 
    '@angular/core';

    @Directive({
     selector: '[ylbHigh]'
     })
    export class HighDirective {

     constructor(private el: ElementRef) { }

    @Input() defaultColor: string;

    @Input('ylbHigh') highlightColor: string;

    @HostListener('click') onMouseEnter() {
    this.highlight(this.highlightColor || '#e6e6e6');
    }

    @HostListener('mouseleave') onMouseLeave() {
     this.highlight(null);
    }

    private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
    }

    }

highlight.directive.ts

    import { Directive, ElementRef, HostListener,Input } from '@angular/core';

    @Directive({
      selector: '[ylbHighlight]'
    })
    export class HighlightDirective {

      constructor(private el: ElementRef) { }

    @Input() defaultColor: string;

    @Input('ylbHighlight') highlightColor: string;

    @HostListener('mouseenter') onMouseEnter() {
      this.highlight(this.highlightColor || '#aa3c9f');
    }

    @HostListener('mouseleave') onMouseLeave() {
      this.highlight(null);
    }

    private highlight(color: string) {
      this.el.nativeElement.style.color = color;
    }



    }

现在onclick列表项目的背景颜色正在变化，但是随着它的消失，我是否可以使onclick特定项目的背景颜色出现，直到我选择下一个项目时，它应该显示上一个项目的背景颜色。点击的项目？

Answer 1

我不认为您创建的指令可以执行您要设置的操作，因为它不知道指令（即self）是否为＃1。但是，您可以执行以下操作：将这些循环放入父组件中，并在Angular中使用Query（@ContentChildren-您可以通过指令或组件类型进行查询）来收集子级集合。

如何默认选择第一项，然后在角度6中突出显示选定的json数据的下一项

1 个答案: