fix(dialog): directionality not injected into child components (#7111)

Since the `direction` option from the overlay only sets the `dir` attribute, it means that any components that depend on the `Directionality` service (e.g. `md-slider`) won't be able to pick it up. These changes add the proper direction to the custom dialog injector.
This commit is contained in:
Kristiyan Kostadinov
2017-09-29 22:12:13 +02:00
committed by Andrew Seguin
parent e05f93981a
commit daa388013b
2 changed files with 17 additions and 1 deletions
+11 -1
View File
@@ -22,6 +22,7 @@ import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {Location} from '@angular/common';
import {SpyLocation} from '@angular/common/testing';
import {Directionality} from '@angular/cdk/bidi';
import {MatDialogContainer} from './dialog-container';
import {OverlayContainer} from '@angular/cdk/overlay';
import {ESCAPE} from '@angular/cdk/keycodes';
@@ -433,6 +434,14 @@ describe('MatDialog', () => {
expect(overlayPane.getAttribute('dir')).toBe('rtl');
});
it('should inject the correct layout direction in the component instance', () => {
const dialogRef = dialog.open(PizzaMsg, { direction: 'rtl' });
viewContainerFixture.detectChanges();
expect(dialogRef.componentInstance.directionality.value).toBe('rtl');
});
it('should close all of the dialogs', async(() => {
dialog.open(PizzaMsg);
dialog.open(PizzaMsg);
@@ -970,7 +979,8 @@ class ComponentWithTemplateRef {
@Component({template: '<p>Pizza</p> <input> <button>Close</button>'})
class PizzaMsg {
constructor(public dialogRef: MatDialogRef<PizzaMsg>,
public dialogInjector: Injector) {}
public dialogInjector: Injector,
public directionality: Directionality) {}
}
@Component({
+6
View File
@@ -28,12 +28,14 @@ import {
TemplateRef,
} from '@angular/core';
import {extendObject} from '@angular/material/core';
import {Directionality} from '@angular/cdk/bidi';
import {Observable} from 'rxjs/Observable';
import {defer} from 'rxjs/observable/defer';
import {Subject} from 'rxjs/Subject';
import {MatDialogConfig} from './dialog-config';
import {MatDialogContainer} from './dialog-container';
import {MatDialogRef} from './dialog-ref';
import {of as observableOf} from 'rxjs/observable/of';
export const MAT_DIALOG_DATA = new InjectionToken<any>('MatDialogData');
@@ -277,6 +279,10 @@ export class MatDialog {
injectionTokens.set(MatDialogRef, dialogRef);
injectionTokens.set(MatDialogContainer, dialogContainer);
injectionTokens.set(MAT_DIALOG_DATA, config.data);
injectionTokens.set(Directionality, {
value: config.direction,
change: observableOf()
});
return new PortalInjector(userInjector || this._injector, injectionTokens);
}