Angular 6自定义指令在值更改后不更新

时间:2018-08-21 17:09:44

标签: angular

我想制作一个动态菜单,菜单本身具有css类,如果我选中一个复选框,则菜单必须从左向右更改位置。

现在该指令有效,但只有一次,当程序加载时,如果我尝试更改程序中的复选框,则不会发生任何事情。

html:

<div class="wrapper">

        <div class="app-menu" adjustSide side="{{position}}">

            <router-outlet></router-outlet>
        </div>

</div>

我尝试使用(side)="position"[side]="position"[(side)]="position"

和指令:

  @Input('side') private side:string;


    private el: HTMLInputElement;

    constructor( private renderer: Renderer2, private elementRef: ElementRef ) { 
        this.el = this.elementRef.nativeElement; 
    }

     ngOnChanges(changes: { [propName: string]: SimpleChange }) {

        if (this.side == 'left') {
            this.renderer.addClass(this.el, 'offset-left');
            this.renderer.removeClass(this.el, 'offset-right');
        }else{
            this.renderer.removeClass(this.el, 'offset-left');
            this.renderer.addClass(this.el, 'offset-right');
        }
    }

我仍在学习有角度的知识,因此由于某种原因,我不明白为什么新值似乎没有达到指令,但我不知道为什么。

我做错了什么?我错过了什么吗?

2 个答案:

答案 0 :(得分:0)

您可以尝试使用行为主题。

组件:

public sub = new BehaviorSubject<any>('');
this.sub.next('left');

指令:

@Input('side') side: Observable<any>;

ngOnInit(){
    if(this.side){
      this.side.subscribe(data=>{
        console.log(data);
      });

    }
  }
  ngOnChanges(){

  }

答案 1 :(得分:0)

您的代码存在一些问题。

只需将adjustSide用作@Input别名,这样就不必在指令中声明其他属性。

只需像这样使用它:

<div class="wrapper">
  <div class="app-menu" [adjustSide]="position">
    <router-outlet></router-outlet>
  </div>
</div>

该指令应如下所示:

import { Directive, ElementRef, Renderer2, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[adjustSide]'
})
export class AdjustSizeDirective implements OnChanges {

  @Input('adjustSide') side: string;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) { }

  ngOnChanges() {

    console.log('Side changed to : ', this.side);

    if (this.side == 'left') {
        this.renderer.addClass(this.el.nativeElement, 'offset-left');
        this.renderer.removeClass(this.el.nativeElement, 'offset-right');
    }
    else{
        this.renderer.removeClass(this.el.nativeElement, 'offset-left');
        this.renderer.addClass(this.el.nativeElement, 'offset-right');
    }
  }

}

如果您查看控制台,就会看到ngOnChanges被调用。我已经通过它记录了this.side的值。

这里是您的情况的StackBlitz Sample