角6设置指令
角6设置指令
提问于 2018-10-15 12:57:56
似乎我无法使指令在我的应用程序中工作。我没有收到任何错误，当我在堆栈闪电战中复制时，它工作得很好。当我第一次尝试实现这个指令时，我是不久前有这个问题，但我犹豫不决地说，这实际上是我的应用程序中“自定义指令”本身的一个问题.最后没人回答这个问题。现在我带着更多的信息来找你。
请让我知道。，你看到我的设置有什么问题吗？我错过了什么？，我觉得我什么都试过了。
以下是我尝试过的：
在Stackblitz工作:我知道如何制作指令。
但是这个非常简单的指令在我的应用程序中不起作用(请在下面找到代码)(澄清:不工作=我没有看到console.log或影子指令应该应用的属性).模板：
指令：
模块：
我尝试过像上面这样在最近的模块中声明它，但是我也尝试在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
Stack Overflow用户
发布于 2018-10-15 14:09:11
很容易调试，以确定指令是否有效。
在html指令中使用括号。改变这个
<div #windowsnap class="blade-container" windowsnap>至
<div #windowsnap class="blade-container" [windowsnap]>如果Directive未正确注册，Angular将抛出错误
窗口快照是未知的属性。
如果收到此错误，只需将Directive声明为最接近的Module即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52817348
复制相关文章
相似问题
腾讯云开发者
