Question

似乎我无法使指令在我的应用程序中起作用。我没有收到任何错误，当我在stackblitz中复制时，它工作正常。当我第一次尝试实现此指令时，我是having this problem a while ago，但我犹豫地说这实际上是我的应用程序中“自定义指令”本身的一个问题……没有人最终回答这个问题。现在，我向您提供了更多信息。

请让我知道。 您是否发现我的设置有问题？我想念什么？我觉得我已经尝试了一切。

这是我尝试过的：

在Stackblitz中工作：我知道如何制作a directive。

但是这个非常简单的指令在我的应用程序中不起作用（请在底部找到代码）（说明：不起作用=我看不到console.log或shadow指令应该应用的属性） ... 模板：指示：模块：我曾尝试在最接近的模块（如上述）中声明它，但我也曾尝试在app.module中声明它。另外，我尝试通过专用模块进行导入（我认为我不需要导出，但应该不会受到伤害）。专用模块：

模板：

<!-- <div #windowsnap class="blade-container" (mouseup)="BladeSnappiness()" (mousedown)="CloseSidebar()"> -->
<div #windowsnap class="blade-container" windowsnap>
  <!-- level 1 -->
  <org-management-blade *ngIf="level1 === 'orgBlade'"> </org-management-blade>
  <org-profile *ngIf="level1 === 'orgProfile'"> </org-profile>

  <!-- level 2 -->
  <org-setup *ngIf="level2 === 'orgSetup'"></org-setup>


  <!-- level 3 -->
  <org-create-admin *ngIf="level4 === 'orgCreateAdmin'"></org-create-admin>
  <org-new-security-profile *ngIf="level4 === 'newSecProfile'"></org-new-security-profile>
  <org-railroad-filter *ngIf="level4 === 'newSecRailroadFilter'"></org-railroad-filter>

  <!-- level 4 -->
  <org-security-permissions *ngIf="level5 === 'newSecPerms'"></org-security-permissions>

  <!-- level 5 -->

</div>

指令：

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

@Directive({ selector: '[windowsnap]' })
export class ShadowDirective {
    constructor(elem: ElementRef, renderer: Renderer2) {
        renderer.setStyle(elem.nativeElement, 'background-color', 'blue');
    }

    @HostListener('mouseenter') CloseSidebar() {
        console.log('windowsnap directive');
    }
}

模块：

 @NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    ScrolltocomponentModule,
    MaskedTextBoxAllModule,
    AgGridModule,
    // ShadowModule
  ],
  providers: [
  ],
  declarations: [
    OrgManagementComponent,
    OrgManagementBladeComponent,
    OrgSetupComponent,
    OrgInfoComponent,
    OrgAdminsComponent,
    OrgSecurityProfilesComponent,
    OrgRailroadFilterComponent,
    OrgSecurityPermissionsComponent,
    OrgNewSecurityProfileComponent,
    OrgCustMappingComponent,
    OrgCreateAdminComponent,
    OrgProfileComponent,
    ShadowDirective
  ]
})
export class OrgManagementModule { }

专用模块：

import { ShadowDirective } from './shadow.directive';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        ShadowDirective
    ],
    providers: [
    ],
    exports: [
        ShadowDirective
    ]
})
export class ShadowModule { }

package.json：

{
  "name": *omitted*,
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl true",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "babel-watch server.js",
    "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/elements": "^6.0.6",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@microsoft/microsoft-graph-types": "1.3.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@syncfusion/ej2-ng-inputs": "^16.2.53",
    "ag-grid": "^18.1.2",
    "ag-grid-angular": "^18.1.0",
    "ag-grid-enterprise": "^18.1.1",
    "angular2-uuid": "^1.1.1",
    "aspnet-prerendering": "^3.0.1",
    "core-js": "^2.5.6",
    "document-register-element": "^1.7.2",
    "powerbi-client": "^2.6.4",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "syncfusion-javascript": "^16.3.22",
    "touch": "^3.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular-devkit/build-ng-packagr": "~0.6.8",
    "@angular/cli": "~6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.1",
    "@azure/msal-angular": "^0.1.2",
    "@compodoc/compodoc": "^1.1.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "msal": "^0.2.3",
    "ng-packagr": "^3.0.0-rc.2",
    "protractor": "^5.4.0",
    "ts-node": "~5.0.1",
    "tsickle": ">=0.25.5",
    "tslib": "^1.7.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

stackblitz package.json

@angular/common5.0.0
@angular/compiler5.0.0
@angular/core5.0.0
@angular/forms5.0.0
@angular/platform-browser5.0.0
@angular/platform-browser-dynamic5.0.0
@angular/router5.0.0
@ng-bootstrap/ng-bootstrap1.0.0
core-js2.5.1
rxjs5.5.2
zone.js

Answer 1

很容易调试以知道该指令是否处于活动状态。

在html指令中使用方括号。改变这个

<div #windowsnap class="blade-container" windowsnap>

到

<div #windowsnap class="blade-container" [windowsnap]>

如果Directive未正确注册，则Angular将引发错误

windowsnap是未知属性。.

如果遇到此错误，只需声明Directive最接近Module。

Angular 6设置指令

1 个答案: