Question

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

我的component.html：

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

我创建了一个属性[minimizeSide] = "'open'"

我的component.ts

export class AppSidebarMinimizerComponent {
  open = "open";

}

我的指示：

@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');
  }
}

点击功能工作正常，但在初始化时不起作用。我错过了什么？

Answer 1

以下列出了您的问题的原因：

@Input字段将在第一次更改检测执行时更新
指令，以及Component，将首先构建，然后运行自己的生命挂钩（OnChanges =＆gt; OnInit等等）。

所以除非你的指令的@Input生命挂钩被执行，否则你不会得到OnChange的值。您可以将初始化代码块移动到指令的OnInit生命挂钩。

constructor() { }

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

Angular2指令属性绑定

1 个答案: