时间戳

首页 > 解决方案 > Angular 指令无法在浏览器中加载/不起作用

angular - Angular 指令无法在浏览器中加载/不起作用

问题描述

通过一个角度教程工作，我刚刚创建了我的第一个指令。不幸的是，它没有按预期工作。

我已经在 google 和 stackoverflow 上搜索了有关如何解决此问题的答案，但找不到任何相关信息。

这是指令的定义：

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

@Directive({
  selector: '[appHover]'
})
export class HoverDirective implements OnInit {
  @HostListener('style.color')
  fontColor: string;

  hover: string;

  @Input()
  get appHover() { return this.fontColor; }
  set appHover(value) {
    if (value.trim() === '') {
      return;
    }

    this.fontColor = value;
  }

  constructor() {
  }

  ngOnInit(): void {
    if (this.fontColor === undefined) {
      this.fontColor = 'red';
    }
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.fontColor = this.hover;
  }

  @HostListener('mouseleave')
  onmouseleave() {
    this.fontColor = undefined;
  }
}

然后我将它导入到 utils 模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HoverDirective } from './hover.directive';

@NgModule({
  declarations: [HoverDirective],
  imports: [
    CommonModule
  ]
})
export class UtilsModule { }

最后是我的 app.component.html 模板：

<header>
  <h1 appHover='red'>Benutzer</h1>
</header>

<main>
  <app-user-list [ngStyle]="style">
  </app-user-list>
</main>

<footer>
  <ng-container [ngSwitch]="company">
    <img *ngSwitchCase="'omega'" src="../assets/img/logo.jpg" alt="logo">
    <img *ngSwitchCase="'alphaAndOmega'" src="../assets/img/alphaAndOmega.jpg" alt="logo">
    <img *ngSwitchDefault src="../assets/img/angularLogo.png" alt="angular">
  </ng-container>

  <img *ngIf="showOmega; else elseBlock" src="../assets/img/logo.jpg" alt="logo">
  <button id="logo" (click)="toggleLogo()">
    Zeige Logo "Alpha and Omega"
  </button>

  <ng-template #elseBlock>
    <img src="../assets/img/alphaAndOmega.jpg" alt="logo">
  </ng-template>
</footer>

<router-outlet></router-outlet>

如果我用谷歌调试工具检查，我发现脚本“hover.directive.ts”没有加载；因此该指令根本不起作用。

任何有关如何解决此问题的帮助和指示将不胜感激。

帕特里克

标签： angular

解决方案

您的 UtilsModule 是否已导入其他模块（SharedModule）？如果是这样，您必须导出指令才能使用它。

@NgModule({
  declarations: [HoverDirective],
  exports: [HoverDirective],
  imports: [
    CommonModule
  ]
})
export class UtilsModule { }

推荐阅读