javascript - Angular 2 : How to keep two methods from repeating

Question

如何仅实现一次 if/else 语句，以便我不会在 header 组件中重复此代码片段，如下所示:

export class HeaderMainComponent {
logoAlt = 'We Craft beautiful websites'; // Logo alt and title texts

@ViewChild('navTrigger') navTrigger: ElementRef;

isMenuShown: false;

constructor(private layoutService: LayoutService, private renderer: Renderer) { }

menuToggle(event: any) {
    if (this.navTrigger.nativeElement.classList.contains('opened')) {
        this.navTrigger.nativeElement.classList.remove('opened');
    } else {
        this.navTrigger.nativeElement.classList.add('opened');
    }
}

onMenuSelect(event: any) {
    this.isMenuShown = false;

    if (this.navTrigger.nativeElement.classList.contains('opened')) {
        this.navTrigger.nativeElement.classList.remove('opened');
    } else {
        this.navTrigger.nativeElement.classList.add('opened');
    }
}

}

Answer 1

你不应该这样做吗？

export class HeaderMainComponent {
logoAlt = 'We Craft beautiful websites'; // Logo alt and title texts

@ViewChild('navTrigger') navTrigger: ElementRef;

isMenuShown: false;

constructor(private layoutService: LayoutService, private renderer: Renderer) { }

menuToggle(event: any) {
    if (this.navTrigger.nativeElement.classList.contains('opened')) {
        this.navTrigger.nativeElement.classList.remove('opened');
    } else {
        this.navTrigger.nativeElement.classList.add('opened');
    }
}

onMenuSelect(event: any) {
    this.isMenuShown = false;

    this.menuToggle(event); // Must apply the event binding as well
}

}