mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore(snack-bar): switch to OnPush change detection (#5515)
* Switches the snack bar component to `OnPush` change detection. * Removes the `detectChanges` workaround for the choppy animations, because it no longer works with `OnPush`. Properly fixes the initial issue by providing a `void` animation state. Relates to #5035.
This commit is contained in:
committed by
mmalerba
parent
32db2bafea
commit
2732bb4fbb
@@ -6,7 +6,7 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
|
||||
import {MdSnackBarRef} from './snack-bar-ref';
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ import {MdSnackBarRef} from './snack-bar-ref';
|
||||
templateUrl: 'simple-snack-bar.html',
|
||||
styleUrls: ['simple-snack-bar.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: {
|
||||
'class': 'mat-simple-snackbar',
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
OnDestroy,
|
||||
Renderer2,
|
||||
ElementRef,
|
||||
ChangeDetectionStrategy,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
@@ -52,6 +53,7 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
|
||||
selector: 'snack-bar-container',
|
||||
templateUrl: 'snack-bar-container.html',
|
||||
styleUrls: ['snack-bar-container.css'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: {
|
||||
'role': 'alert',
|
||||
'[@state]': 'animationState',
|
||||
@@ -59,6 +61,7 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
|
||||
},
|
||||
animations: [
|
||||
trigger('state', [
|
||||
state('void', style({transform: 'translateY(100%)'})),
|
||||
state('initial', style({transform: 'translateY(100%)'})),
|
||||
state('visible', style({transform: 'translateY(0%)'})),
|
||||
state('complete', style({transform: 'translateY(100%)'})),
|
||||
|
||||
@@ -135,12 +135,6 @@ export class MdSnackBar {
|
||||
let containerPortal = new ComponentPortal(MdSnackBarContainer, config.viewContainerRef);
|
||||
let containerRef: ComponentRef<MdSnackBarContainer> = overlayRef.attach(containerPortal);
|
||||
containerRef.instance.snackBarConfig = config;
|
||||
|
||||
// The snackbar animation needs the content to be resolved in order to transform the bar
|
||||
// out of the view initially (so it can slide in). To make the content resolve, we manually
|
||||
// detect changes.
|
||||
containerRef.changeDetectorRef.detectChanges();
|
||||
|
||||
return containerRef.instance;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user