dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Performance improvements by using On Push change detection strategy on top level components

Browse Source
This commit is contained in:
Igor Kulikov 2021-05-26 15:17:03 +03:00
parent 99f15f5fdb
commit 61a5047e34
6 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/src/app/modules/home/menu/menu-link.component.ts
View File

@ -14,13 +14,14 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Input, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { MenuSection } from '@core/services/menu.models'; import { MenuSection } from '@core/services/menu.models';
@Component({ @Component({
selector: 'tb-menu-link', selector: 'tb-menu-link',
templateUrl: './menu-link.component.html', templateUrl: './menu-link.component.html',
styleUrls: ['./menu-link.component.scss'] styleUrls: ['./menu-link.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class MenuLinkComponent implements OnInit { export class MenuLinkComponent implements OnInit {

5
ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
View File

@ -14,14 +14,15 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Input, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { MenuSection } from '@core/services/menu.models'; import { MenuSection } from '@core/services/menu.models';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
selector: 'tb-menu-toggle', selector: 'tb-menu-toggle',
templateUrl: './menu-toggle.component.html', templateUrl: './menu-toggle.component.html',
styleUrls: ['./menu-toggle.component.scss'] styleUrls: ['./menu-toggle.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class MenuToggleComponent implements OnInit { export class MenuToggleComponent implements OnInit {

5
ui-ngx/src/app/modules/home/menu/side-menu.component.ts
View File

@ -14,14 +14,15 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { MenuService } from '@core/services/menu.service'; import { MenuService } from '@core/services/menu.service';
import { MenuSection } from '@core/services/menu.models'; import { MenuSection } from '@core/services/menu.models';
@Component({ @Component({
selector: 'tb-side-menu', selector: 'tb-side-menu',
templateUrl: './side-menu.component.html', templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss'] styleUrls: ['./side-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class SideMenuComponent implements OnInit { export class SideMenuComponent implements OnInit {

7
ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MenuService } from '@core/services/menu.service'; import { MenuService } from '@core/services/menu.service';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { MediaBreakpoints } from '@shared/models/constants'; import { MediaBreakpoints } from '@shared/models/constants';
@ -25,7 +25,8 @@ import { HomeDashboard } from '@shared/models/dashboard.models';
@Component({ @Component({
selector: 'tb-home-links', selector: 'tb-home-links',
templateUrl: './home-links.component.html', templateUrl: './home-links.component.html',
styleUrls: ['./home-links.component.scss'] styleUrls: ['./home-links.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class HomeLinksComponent implements OnInit { export class HomeLinksComponent implements OnInit {
@ -37,6 +38,7 @@ export class HomeLinksComponent implements OnInit {
constructor(private menuService: MenuService, constructor(private menuService: MenuService,
public breakpointObserver: BreakpointObserver, public breakpointObserver: BreakpointObserver,
private cd: ChangeDetectorRef,
private route: ActivatedRoute) { private route: ActivatedRoute) {
} }
@ -57,6 +59,7 @@ export class HomeLinksComponent implements OnInit {
if (this.breakpointObserver.isMatched(MediaBreakpoints['gt-lg'])) { if (this.breakpointObserver.isMatched(MediaBreakpoints['gt-lg'])) {
this.cols = 4; this.cols = 4;
} }
this.cd.detectChanges();
} }
sectionColspan(section: HomeSection): number { sectionColspan(section: HomeSection): number {

5
ui-ngx/src/app/shared/components/breadcrumb.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs'; import { BehaviorSubject, Subject } from 'rxjs';
import { BreadCrumb, BreadCrumbConfig } from './breadcrumb'; import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router'; import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
@ -25,7 +25,8 @@ import { guid } from '@core/utils';
@Component({ @Component({
selector: 'tb-breadcrumb', selector: 'tb-breadcrumb',
templateUrl: './breadcrumb.component.html', templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.scss'] styleUrls: ['./breadcrumb.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class BreadcrumbComponent implements OnInit, OnDestroy { export class BreadcrumbComponent implements OnInit, OnDestroy {

5
ui-ngx/src/app/shared/components/user-menu.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { User } from '@shared/models/user.model'; import { User } from '@shared/models/user.model';
import { Authority } from '@shared/models/authority.enum'; import { Authority } from '@shared/models/authority.enum';
import { select, Store } from '@ngrx/store'; import { select, Store } from '@ngrx/store';
@ -27,7 +27,8 @@ import { Router } from '@angular/router';
@Component({ @Component({
selector: 'tb-user-menu', selector: 'tb-user-menu',
templateUrl: './user-menu.component.html', templateUrl: './user-menu.component.html',
styleUrls: ['./user-menu.component.scss'] styleUrls: ['./user-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class UserMenuComponent implements OnInit, OnDestroy { export class UserMenuComponent implements OnInit, OnDestroy {