我想制作一个动态菜单,菜单本身具有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');
}
}
我仍在学习有角度的知识,因此由于某种原因,我不明白为什么新值似乎没有达到指令,但我不知道为什么。
我做错了什么?我错过了什么吗?
答案 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。