自定义指令 - 解析器错误：得到插值 ({{}}) 表达式应为

Question

我创建了一个自定义指令appFade，并尝试将其添加到子组件中，如下所示。这样做时，我得到“解析器错误：在需要表达式的地方得到插值 ({{}})。”罪魁祸首是：[appFade]="{{true}}"。我在Got interpolation ({{}}) where expression was expected 上看到：

{{}} never goes together with [prop]="..." or (event)="..."

我尝试摆脱插值和/或[ ] 和许多其他排列，但到目前为止没有任何效果。任何想法我应该如何修复我的代码？

自定义指令“appFade”：

import { Directive, Renderer, ElementRef, HostListener } from '@angular/core';
import { NgModuleResolver } from '@angular/compiler';

@Directive({
  selector: '[appFade]'
})
export class FadeDirective {

  constructor(private renderer : Renderer, private el : ElementRef) {
    el.nativeElement.style.opacity= '.6';
    el.nativeElement.style.transition = '.4s opacity'
   }

  @HostListener('mouseover') mouseover() {
    this.renderer.setElementStyle(this.el.nativeElement, 'opacity', '1');
  }

  @HostListener('mouseout') mouseout() {
    this.renderer.setElementStyle(this.el.nativeElement, 'opacity', '.6');
  }
}

HTML 文件：

  <app-repository-display [searchResults]="searchResults.repositories" [appFade]="{{true}}"></app-repository-display>

Answer 1

您需要在标记中使用appFade fade="true"，然后在您的@directive 类中创建一个@Input() fade: boolean; 来接收此值。如果您的目标只是为您的组件添加一个淡入淡出参数，那么您应该在那里将其配置为输入，而不是定义自定义指令。