refactor(menu): change menu item host listeners so they can be safely inherited (#15871)

[Based on the discussion here](https://github.com/angular/material2/pull/15857/files#r277058391). Reworks the host listeners in `MatMenuItem` so that extending it works properly both in ViewEngine and Ivy.
This commit is contained in:
Kristiyan Kostadinov
2019-04-24 05:06:55 +02:00
committed by mmalerba
parent 20a879a94c
commit 3a7beb9382
+13 -3
View File
@@ -16,6 +16,7 @@ import {
Inject,
Optional,
Input,
HostListener,
} from '@angular/core';
import {
CanDisable, CanDisableCtor,
@@ -50,8 +51,6 @@ export const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & type
'[attr.tabindex]': '_getTabIndex()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.disabled]': 'disabled || null',
'(click)': '_checkDisabled($event)',
'(mouseenter)': '_handleMouseEnter()',
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
@@ -129,6 +128,12 @@ export class MatMenuItem extends _MatMenuItemMixinBase
}
/** Prevents the default element actions if it is disabled. */
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritte.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
@HostListener('click', ['$event'])
_checkDisabled(event: Event): void {
if (this.disabled) {
event.preventDefault();
@@ -137,6 +142,12 @@ export class MatMenuItem extends _MatMenuItemMixinBase
}
/** Emits to the hover stream. */
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritte.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
@HostListener('mouseenter')
_handleMouseEnter() {
this._hovered.next(this);
}
@@ -164,4 +175,3 @@ export class MatMenuItem extends _MatMenuItemMixinBase
}
}