Angular2指令属性绑定

我有一个指令，可以在单击时显示或隐藏侧边栏。我想创建一个选项来显示侧边栏或隐藏I上的侧边栏

My component.html：

<button class="sidebar-minimizer" type="button" appSidebarMinimizer [minimizeSide] = "open" appBrandMinimizer></button>

我的指示：

@Directive({
  selector: '[appSidebarMinimizer]'
})
export class SidebarMinimizeDirective {
  @Input() minimizeSide:string;
  constructor() {
    if (this.minimizeSide == "open"){
      document.querySelector('body').classList.toggle('brand-minimized');
    }
  }

  @HostListener('click', ['$event'])
  toggleOpen($event: any) {
    $event.preventDefault();
    document.querySelector('body').classList.toggle('sidebar-minimized');
  }
}

---

单击功能工作正常，但在初始化时不工作。我遗漏了什么？

下面列出了您出现问题的原因：

• @Input

  字段将在执行第一次更改检测时更新
• 指令也是组件，将首先构造，然后运行自身的生命挂钩（

  OnChanges

  =>

  OnInit

  等等）

因此，除非执行指令的

OnChange

生命挂钩，否则不会将值绑定到

@Input

。您可以将初始化代码块移动到指令的

OnInit

life钩子

constructor() { }

ngOnInit() {
  if (this.minimizeSide == "open"){
    document.querySelector('body').classList.toggle('brand-minimized');
  }
}

constructor() { }

ngOnInit() {
  if (this.minimizeSide == "open"){
    document.querySelector('body').classList.toggle('brand-minimized');
  }
}