Question

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

我已经搜索了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>

如果我使用Google调试工具进行了检查，则会发现脚本“ hover.directive.ts”未加载；因此该指令根本不起作用。

对于解决该问题的任何帮助和指示，我们将不胜感激。

帕特里克

Answer 1

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

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

Answer 2

似乎您正在通过导入UtilsModule在AppModule中使用HoverDirective。在这种情况下，UtilsModule仅在其父模块（UtilsModule）导出时才可被其他模块访问。因此，您的@NgModule({ declarations: [HoverDirective], exports: [HoverDirective], imports: [ CommonModule ] }) export class UtilsModule { }应该是：

## Make some example  data
set.seed(1)
library(raster)
library(rgdal)
library(rgeos)
library(RANN)
library(spatialEco)

p <- shapefile(system.file("external/lux.shp", package="raster"))

##  Project data into a planar coordinate system (here UTM zone 32)
utmStr <- "+proj=utm +zone=%d +datum=NAD83 +units=m +no_defs +ellps=GRS80 +towgs84=0,0,0"
crs <- CRS(sprintf(utmStr, 32))
pUTM <- spTransform(p, crs)

# the points of interest (all within some threshold distance of the polygons)
ptsUTM <- spsample(gBuffer(pUTM,width=2000)-pUTM, n=10000, type="random")
## Plot to visualize
plot(ptsUTM, pch=16, cex=.5,col="red")
plot(pUTM, col=colorRampPalette(blues9)(12), add=TRUE)

# the gDistance method
starttime <- Sys.time()
## Set up container for results
n <- length(ptsUTM)
nearestCantons <- character(n)
## For each point, find name of nearest polygon (in this case, Belgian cantons)
for (i in seq_along(nearestCantons)) {
    nearestCantons[i] <- pUTM$NAME_2[which.min(gDistance(ptsUTM[i,], pUTM, byid=TRUE))]
}
Sys.time()-starttime

# the nn2 method
starttime <- Sys.time()
## create search points and associate with polygon attributes
rp <- spsample(pUTM,n=10000,type="regular")
rp2 <- point.in.poly(rp,pUTM)
# search for nearest point (with radius)
nn <- nn2(coordinates(rp2),coordinates(ptsUTM),k=1,searchtype="radius",radius=5000)$nn.idx
nearestCantons2 <- rp2$NAME_2[nn]
Sys.time()-starttime

Angular指令无法在浏览器中加载/无效

2 个答案: