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;才能接收此值。如果您的目标只是在组件中添加衰落参数，则应在此处将其配置为输入，而不要定义自定义指令。

自定义指令-解析器错误：在需要表达式的地方进行了插值（{{}}）

1 个答案: