Angular 17 自定义指令渲染不起作用

Question

我正在学习 Angular。

我想创建自定义指令，但不起作用！ （它不是用于生产的应用程序，它是一个发现应用程序^^）

我没有错误，项目构建！但该指令不起作用！

要创建指令，我使用：

ng generate directive directive-name

你能帮我解决我的问题吗？

代码：

模板 - app.component.html

<h1 class="center" >Liste de pokémons</h1>
<input
    #input
    (keyup.enter)="selectPokemon(input.value)"
    type="number"
/>
@if(pokemonSelected) {
    <p>Vous avez sélectionné le pokémon : {{ pokemonSelected.name }}</p>
}
@else {
    <p>Aucune correspondance.</p>
}
<div class="container" >
    <div class="row" >
@for (pokemon of pokemonList; track pokemon) {
    <div class="col s12 m4 s6">
        <div class="card horizontal" appBorderCard>
          <div class="card-image">
            <img [src]="pokemon.picture">
          </div>
          <div class="card-stacked">
            <div class="card-content">
                <p class="header">{{ pokemon.name }}</p>
                <p><small>{{ pokemon.created }}</small></p>
            </div>
          </div>
        </div>
      </div>
} @empty {
    <p>Aucun élément dans la base.</p>
}
    </div>
</div>
<router-outlet />

指令 - border-card.directive.ts

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

@Directive({
  selector: '[appBorderCard]'
})
export class BorderCardDirective {

  constructor(private el: ElementRef) {
    this.setHeight(180);
    this.setBorder("#f5f5f5");
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.setBorder("#009688");
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.setBorder("#f5f5f5");
  }

  private setHeight(height: number) {
    this.el.nativeElement.style.height = `${height}px`;
  }

  private setBorder(color: string) {
    this.el.nativeElement.style.border = `solid 4px ${color}`;
  }

}

堆栈：

Angular CLI: 17.3.2
Node: 21.6.2 (Unsupported)
Package Manager: npm 10.5.0

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1703.2 (cli-only)
@angular-devkit/core         17.3.2 (cli-only)
@angular-devkit/schematics   17.3.2 (cli-only)
@schematics/angular          17.3.2 (cli-only)

谢谢您的提前

Answer 1

如果您使用独立应用程序组件，请确保您已在 app.components 导入数组上导入指令！

imports: [
...
BorderCardDirective,
...
]

如果您使用模块化方法，同样要确保

app.module.ts

已将指令添加到导入数组中！

如果未导入，则 Angular 将采用

appBorderCard

作为 HTML 属性，并且不会抛出错误！