mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore: remove change detection toggle from demo app (#6444)
Removes the toggle that changes the change detection in the demo app. It's not needed anymore since all components use OnPush.
This commit is contained in:
committed by
Andrew Seguin
parent
6422640b03
commit
bfea2634d1
@@ -30,9 +30,6 @@
|
||||
<div class="demo-toolbar">
|
||||
<h1>Angular Material Demos</h1>
|
||||
<div>
|
||||
<button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
|
||||
Change detection: {{changeDetectionStrategy}}
|
||||
</button>
|
||||
<button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
|
||||
<md-icon class="md-24">fullscreen</md-icon>
|
||||
</button>
|
||||
@@ -44,14 +41,8 @@
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<div #root="dir" dir="ltr" class="demo-content" [ngSwitch]="changeDetectionStrategy">
|
||||
<div *ngSwitchDefault>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
<demo-app-on-push *ngSwitchCase="'OnPush'">
|
||||
<router-outlet></router-outlet>
|
||||
</demo-app-on-push>
|
||||
<div #root="dir" dir="ltr" class="demo-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</md-sidenav-container>
|
||||
|
||||
@@ -2,13 +2,10 @@ import {
|
||||
Component,
|
||||
ViewEncapsulation,
|
||||
ElementRef,
|
||||
ChangeDetectionStrategy,
|
||||
Renderer2,
|
||||
} from '@angular/core';
|
||||
import {OverlayContainer} from '@angular/material';
|
||||
|
||||
const changeDetectionKey = 'mdDemoChangeDetection';
|
||||
|
||||
/**
|
||||
* The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
|
||||
* while other demos will use `DemoApp` component. Since DemoApp and AccessibilityDemo use
|
||||
@@ -35,15 +32,6 @@ export class EntryApp {}
|
||||
})
|
||||
export class Home {}
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'demo-app-on-push',
|
||||
template: '<ng-content></ng-content>',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DemoAppOnPush {}
|
||||
|
||||
/**
|
||||
* DemoApp with toolbar and sidenav.
|
||||
*/
|
||||
@@ -56,7 +44,6 @@ export class DemoAppOnPush {}
|
||||
})
|
||||
export class DemoApp {
|
||||
dark = false;
|
||||
changeDetectionStrategy: string;
|
||||
navItems = [
|
||||
{name: 'Autocomplete', route: '/autocomplete'},
|
||||
{name: 'Button', route: '/button'},
|
||||
@@ -97,14 +84,7 @@ export class DemoApp {
|
||||
constructor(
|
||||
private _element: ElementRef,
|
||||
private _renderer: Renderer2,
|
||||
private _overlayContainer: OverlayContainer) {
|
||||
// Some browsers will throw when trying to access localStorage in incognito.
|
||||
try {
|
||||
this.changeDetectionStrategy = window.localStorage.getItem(changeDetectionKey) || 'Default';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
private _overlayContainer: OverlayContainer) {}
|
||||
|
||||
toggleFullscreen() {
|
||||
let elem = this._element.nativeElement.querySelector('.demo-content');
|
||||
@@ -119,17 +99,6 @@ export class DemoApp {
|
||||
}
|
||||
}
|
||||
|
||||
toggleChangeDetection() {
|
||||
try {
|
||||
this.changeDetectionStrategy = this.changeDetectionStrategy === 'Default' ?
|
||||
'OnPush' : 'Default';
|
||||
window.localStorage.setItem(changeDetectionKey, this.changeDetectionStrategy);
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
toggleTheme() {
|
||||
const darkThemeClass = 'unicorn-dark-theme';
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {DemoApp, DemoAppOnPush, Home} from './demo-app';
|
||||
import {DemoApp, Home} from './demo-app';
|
||||
import {DEMO_APP_ROUTES} from './routes';
|
||||
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
|
||||
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
|
||||
@@ -65,7 +65,6 @@ import {TableHeaderDemo} from '../table/table-header-demo';
|
||||
CheckboxDemo,
|
||||
DatepickerDemo,
|
||||
DemoApp,
|
||||
DemoAppOnPush,
|
||||
DialogDemo,
|
||||
GesturesDemo,
|
||||
GridListDemo,
|
||||
|
||||
Reference in New Issue
Block a user