Question

1）使用angularCLI创建了一个新指令。

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

@Directive({
  selector: '[scrollable]'
})
export class ScrollableDirective implements OnInit{

  constructor(public el:ElementRef) { }

  ngOnInit(){
    console.log('its working!')
  }

}

2）Angular CLI自动将指令添加到app.module声明

import { ScrollableDirective } from './scrollable/scrollable.directive';

@NgModule({
  declarations: [
    ...
    ScrollableDirective
  ],

3）尝试将该指令用作属性

<div class="menu-container" *ngIf="menuService.showMenu" [scrollable]>

4）结果错误

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'scrollable' since it isn't a known property of 'div'.

我已阅读官方文档，我似乎正在做所有正确的事情。我无法理解我可能错过的内容以及无法使用该指令的原因。

Answer 1

尝试在没有scrollable绑定的情况下添加[]指令：

<div class="menu-container" *ngIf="menuService.showMenu" scrollable>

[]如果您将值传递给指令，但您没有在指令中使用任何@Input值，那么就不需要它。

docs使用绑定括号[highlightColor]="'orange'"，因为它期望来自使用者的字符串值指定颜色。如果您需要传递给attribute指令的值以某种方式使用，则只需要@Input。

@Kevin是正确的，错误是由@Input未添加到指令配置引起的，但在这种情况下你不需要它，所以避免导入/导出该装饰器。

Angular指令不能用？

1 个答案: