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

Question

代码和说明已更新

我希望此指令基于布尔值禁用或启用，但无论我通过 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 装饰器。它向 class 添加元数据，使指令的 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;
}