>

응용 프로그램에서 지시문이 작동하지 않는 것 같습니다. 나는 오류가 발생하지 않으며 stackblitz에서 재현 할 때 잘 작동합니다. 나는 였습니다. 이 지시문을 처음 구현하려고 할 때이 문제가 발생했습니다 .하지만 실제로는 '맞춤 지시문'자체가있는 응용 프로그램에서 문제라고 말하면서 주저하지 않았습니다. 아무도이 질문에 대답하지 않았습니다. 이제 자세한 정보를 알려 드리겠습니다.

알려주세요.설정에 문제가 있습니까? 내가 무엇을 놓치고 있습니까?모든 것을 시도했다고 생각합니다.

내가 시도한 것은 :

Stackblitz에서 작동 : 지시문 을 만드는 방법을 알고 있습니다.

그러나이 간단한 지시문이 내 앱에서 작동하지 않습니다 (아래에서 코드를 찾으십시오) (설명 : 작동하지 않습니다 = 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

  • 답변 # 1

    지시문이 활성화되어 있는지 알기 쉽게 디버깅 할 수 있습니다.

    html에서 지시문에 대괄호를 사용하십시오. 이것을 변경

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

    to

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

    Directive 인 경우   Angular 가 올바르게 등록되지 않았습니다  오류가 발생합니다

    와이즈 비즈

    이 오류가 발생하면

    windowsnap is unknown property..

    를 선언하십시오.  가장 가까운 Directive .

    Module

  • 이전 java - persistencexml 및 제공자를 둘 다 지정한 동안 찾을 수 없습니다
  • 다음 providerngOnDestroy로 각도 빌드 나누기