如何将值传递给angular中的指令

Question

代码＆amp;说明已更新

我希望这个指令基于布尔值禁用或启用，但是通过isDraggable变量发送的任何值（true / false），在这两种情况下，指令都被启用。

此代码中需要改进哪些内容？

@Directive({
  selector: '[movableObject]'
})
export class MovableDirective extends DraggableDirective {
  @Input() movableObject: boolean;
}

@Component({
  selector: 'app-panel',
  template: `<div [movableObject]="isDraggable"></div>`,
  styleUrls: ['./panel.component.scss'],
})
export class PanelComponent implements OnInit {
  private isDraggable: boolean = true;
}

Answer 1

注意@Input装饰器。它向类添加元数据，使指令的movableObject属性可用于绑定。

@Directive({
  selector: '[movableObject]'
})
export class MovableDirective extends DraggableDirective {
   @Input() movableObject: boolean;
}

@Component({
  selector: 'app-panel',
  template: `<div [movableObject]="isDraggable"></div>`,
  styleUrls: ['./panel.component.scss'],
})
export class PanelComponent implements OnInit {
  private isDraggable: boolean;
}