Skip to content

Commit 0be9c4e

Browse files
authored
Revert "fix(sidenav): scrollable instance not exposed when explicitly specifying content element (#11517)" (#11697)
This reverts commit 436ac7d.
1 parent 436ac7d commit 0be9c4e

File tree

5 files changed

+11
-60
lines changed

5 files changed

+11
-60
lines changed

src/lib/sidenav/drawer-container.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55

66
<ng-content select="mat-drawer-content">
77
</ng-content>
8-
<mat-drawer-content *ngIf="!_content">
8+
<mat-drawer-content *ngIf="!_content" cdkScrollable>
99
<ng-content></ng-content>
1010
</mat-drawer-content>

src/lib/sidenav/drawer.spec.ts

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {A11yModule} from '@angular/cdk/a11y';
1515
import {PlatformModule} from '@angular/cdk/platform';
1616
import {ESCAPE} from '@angular/cdk/keycodes';
1717
import {dispatchKeyboardEvent} from '@angular/cdk/testing';
18-
import {CdkScrollable} from '@angular/cdk/scrolling';
1918

2019

2120
describe('MatDrawer', () => {
@@ -497,7 +496,6 @@ describe('MatDrawerContainer', () => {
497496
DrawerContainerStateChangesTestApp,
498497
AutosizeDrawer,
499498
BasicTestApp,
500-
DrawerContainerWithContent,
501499
],
502500
});
503501

@@ -694,27 +692,6 @@ describe('MatDrawerContainer', () => {
694692
expect(fixture.componentInstance.drawer.opened).toBe(false);
695693
}));
696694

697-
it('should expose a scrollable when the consumer has not specified drawer content',
698-
fakeAsync(() => {
699-
const fixture = TestBed.createComponent(DrawerContainerTwoDrawerTestApp);
700-
701-
fixture.detectChanges();
702-
703-
expect(fixture.componentInstance.drawerContainer.scrollable instanceof CdkScrollable)
704-
.toBe(true);
705-
}));
706-
707-
it('should expose a scrollable when the consumer has specified drawer content',
708-
fakeAsync(() => {
709-
const fixture = TestBed.createComponent(DrawerContainerWithContent);
710-
711-
fixture.detectChanges();
712-
713-
expect(fixture.componentInstance.drawerContainer.scrollable instanceof CdkScrollable)
714-
.toBe(true);
715-
}));
716-
717-
718695
});
719696

720697

@@ -897,16 +874,3 @@ class AutosizeDrawer {
897874
@ViewChild(MatDrawer) drawer: MatDrawer;
898875
fillerWidth = 0;
899876
}
900-
901-
902-
@Component({
903-
template: `
904-
<mat-drawer-container>
905-
<mat-drawer>Drawer</mat-drawer>
906-
<mat-drawer-content>Content</mat-drawer-content>
907-
</mat-drawer-container>
908-
`,
909-
})
910-
class DrawerContainerWithContent {
911-
@ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer;
912-
}

src/lib/sidenav/drawer.ts

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {Directionality} from '@angular/cdk/bidi';
1111
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1212
import {ESCAPE} from '@angular/cdk/keycodes';
1313
import {Platform} from '@angular/cdk/platform';
14-
import {CdkScrollable, ScrollDispatcher} from '@angular/cdk/scrolling';
14+
import {CdkScrollable} from '@angular/cdk/scrolling';
1515
import {DOCUMENT} from '@angular/common';
1616
import {
1717
AfterContentChecked,
@@ -75,14 +75,10 @@ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean {
7575
changeDetection: ChangeDetectionStrategy.OnPush,
7676
encapsulation: ViewEncapsulation.None,
7777
})
78-
export class MatDrawerContent extends CdkScrollable implements AfterContentInit {
78+
export class MatDrawerContent implements AfterContentInit {
7979
constructor(
8080
private _changeDetectorRef: ChangeDetectorRef,
81-
@Inject(forwardRef(() => MatDrawerContainer)) public _container: MatDrawerContainer,
82-
elementRef: ElementRef<HTMLElement>,
83-
scrollDispatcher: ScrollDispatcher,
84-
ngZone: NgZone) {
85-
super(elementRef, scrollDispatcher, ngZone);
81+
@Inject(forwardRef(() => MatDrawerContainer)) public _container: MatDrawerContainer) {
8682
}
8783

8884
ngAfterContentInit() {
@@ -405,7 +401,6 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
405401
export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
406402
@ContentChildren(MatDrawer) _drawers: QueryList<MatDrawer>;
407403
@ContentChild(MatDrawerContent) _content: MatDrawerContent;
408-
@ViewChild(MatDrawerContent) _userContent: MatDrawerContent;
409404

410405
/** The drawer child with the `start` position. */
411406
get start(): MatDrawer | null { return this._start; }
@@ -476,9 +471,7 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
476471
readonly _contentMarginChanges = new Subject<{left: number|null, right: number|null}>();
477472

478473
/** Reference to the CdkScrollable instance that wraps the scrollable content. */
479-
get scrollable(): CdkScrollable {
480-
return this._userContent || this._content;
481-
}
474+
@ViewChild(CdkScrollable) scrollable: CdkScrollable;
482475

483476
constructor(@Optional() private _dir: Directionality,
484477
private _element: ElementRef,

src/lib/sidenav/sidenav.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ The `<mat-sidenav>` can render in one of three different ways based on the `mode
109109

110110
| Mode | Description |
111111
|--------|-----------------------------------------------------------------------------------------|
112-
| `over` | Sidenav floats over the primary content, which is covered by a backdrop |
113-
| `push` | Sidenav pushes the primary content out of its way, also covering it with a backdrop |
112+
| `over` | Sidenav floats over the primary content, which is covered by a backdrop |
113+
| `push` | Sidenav pushes the primary content out of its way, also covering it with a backdrop |
114114
| `side` | Sidenav appears side-by-side with the main content, shrinking the main content's width to make space for the sidenav. |
115115

116116
If no `mode` is specified, `over` is used by default.
@@ -186,10 +186,10 @@ To react to scrolling inside the `<mat-sidenav-container>`, you can get a hold o
186186
`CdkScrollable` instance through the `MatSidenavContainer`.
187187

188188
```ts
189-
class YourComponent implements AfterViewInit {
189+
class YourComponent {
190190
@ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer;
191191

192-
ngAfterViewInit() {
192+
constructor() {
193193
this.sidenavContainer.scrollable.elementScrolled().subscribe(() => /* react to scrolling */);
194194
}
195195
}

src/lib/sidenav/sidenav.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,10 @@ import {
1717
Input,
1818
ViewEncapsulation,
1919
QueryList,
20-
ElementRef,
21-
NgZone,
2220
} from '@angular/core';
2321
import {MatDrawer, MatDrawerContainer, MatDrawerContent} from './drawer';
2422
import {matDrawerAnimations} from './drawer-animations';
2523
import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
26-
import {ScrollDispatcher} from '@angular/cdk/scrolling';
2724

2825

2926
@Component({
@@ -41,11 +38,8 @@ import {ScrollDispatcher} from '@angular/cdk/scrolling';
4138
export class MatSidenavContent extends MatDrawerContent {
4239
constructor(
4340
changeDetectorRef: ChangeDetectorRef,
44-
@Inject(forwardRef(() => MatSidenavContainer)) container: MatSidenavContainer,
45-
elementRef: ElementRef<HTMLElement>,
46-
scrollDispatcher: ScrollDispatcher,
47-
ngZone: NgZone) {
48-
super(changeDetectorRef, container, elementRef, scrollDispatcher, ngZone);
41+
@Inject(forwardRef(() => MatSidenavContainer)) container: MatSidenavContainer) {
42+
super(changeDetectorRef, container);
4943
}
5044
}
5145

0 commit comments

Comments
 (0)