Angular 2 Block UI组件

Question

What is the proper way to block the ui of a component in Angular 2?

Something like this

<component [blockUI]="true"></component>

Answer 1

In the component's less file put:

:host {
    pointer-events: none;
}

If you have components below, they will get the clicks, if you'd like to prevent this, instead of the css do:

<component (click)="$event.preventDefault()">

to make it dynamic, assuming you use less and have a variable called notInteractive :

:host {
  &.not-interactive {
    pointer-events: none;
  }
}