run change detection with queue manager in permission directive

add simple queue manager
resolves #15167

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -38,6 +38,8 @@ import { ShortDateTimePipe } from './pipes/short-date-time.pipe';
 import { ShortTimePipe } from './pipes/short-time.pipe';
 import { ShortDatePipe } from './pipes/short-date.pipe';
 import { TimeoutLimitedOAuthService } from './services/timeout-limited-oauth.service';
+import { QUEUE_MANAGER } from './tokens/queue.token';
+import { DefaultQueueManager } from './utils/queue';
 
 export function storageFactory(): OAuthStorage {
   return oAuthStorage;
@@ -193,6 +195,10 @@ export class CoreModule {
           useValue: localizationContributor(options.localizations),
           deps: [LocalizationService],
         },
+        {
+          provide: QUEUE_MANAGER,
+          useClass: DefaultQueueManager,
+        },
       ],
     };
   }

npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts

@@ -2,6 +2,7 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Directive,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -12,6 +13,8 @@ import {
 import { ReplaySubject, Subscription } from 'rxjs';
 import { distinctUntilChanged, take } from 'rxjs/operators';
 import { PermissionService } from '../services/permission.service';
+import { QUEUE_MANAGER } from '../tokens/queue.token';
+import { QueueManager } from '../utils/queue';
 
 @Directive({
   selector: '[abpPermission]',
@@ -32,6 +35,7 @@ export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit
     private vcRef: ViewContainerRef,
     private permissionService: PermissionService,
     private cdRef: ChangeDetectorRef,
+    @Inject(QUEUE_MANAGER) public queue: QueueManager,
   ) {}
 
   private check() {
@@ -66,7 +70,7 @@ export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit
   }
 
   ngAfterViewInit() {
-    this.cdrSubject.pipe(take(1)).subscribe(() => this.cdRef.detectChanges());
+    this.cdrSubject.pipe(take(1)).subscribe(() => this.queue.add(() => this.cdRef.detectChanges()));
     this.rendered = true;
   }
 }

npm/ng-packs/packages/core/src/lib/tokens/index.ts

@@ -5,4 +5,5 @@ export * from './localization.token';
 export * from './lodaer-delay.token';
 export * from './manage-profile.token';
 export * from './options.token';
+export * from './queue.token';
 export * from './tenant-key.token';

npm/ng-packs/packages/core/src/lib/tokens/queue.token.ts

@@ -0,0 +1,4 @@
+import { QueueManager } from "../utils/queue";
+import { InjectionToken } from "@angular/core";
+
+export const QUEUE_MANAGER = new InjectionToken<QueueManager>("QUEUE_MANAGER");

npm/ng-packs/packages/core/src/lib/utils/index.ts

@@ -15,6 +15,7 @@ export * from './localization-utils';
 export * from './multi-tenancy-utils';
 export * from './number-utils';
 export * from './object-utils';
+export * from './queue';
 export * from './route-utils';
 export * from './string-utils';
 export * from './tree-utils';

npm/ng-packs/packages/core/src/lib/utils/queue.ts

@@ -0,0 +1,48 @@
+export interface QueueManager {
+  add(fn: () => void): void;
+  init(interval: number, stackSize: number): void;
+}
+
+export class DefaultQueueManager implements QueueManager {
+  private queue: Array<() => void> = [];
+  private isRunning = false;
+  private stack = 0;
+  private interval = 0;
+  private stackSize = 100;
+
+  public init(interval: number, stackSize: number) {
+    this.interval = interval;
+    this.stackSize = stackSize;
+  }
+
+  public add(fn: () => void) {
+    this.queue.push(fn);
+    this.run();
+  }
+
+  private run() {
+    if (this.isRunning) return;
+    this.stack++;
+
+    this.isRunning = true;
+
+    const fn = this.queue.shift();
+
+    if (!fn) {
+      this.isRunning = false;
+      return;
+    }
+
+    fn();
+    if (this.stack > this.stackSize) {
+      setTimeout(() => {
+        this.isRunning = false;
+        this.run();
+        this.stack = 0;
+      }, this.interval);
+    } else {
+      this.isRunning = false;
+      this.run();
+    }
+  }
+}

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.DbMigrator/appsettings.json

@@ -1,31 +1,31 @@
 {
-  "ConnectionStrings": {
+    "ConnectionStrings": {
-    "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName;Trusted_Connection=True"
+        "Default": "Server=localhost;Database=MyProjectNameHOossos;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true"
-  },
+    },
-  "OpenIddict": {
+    "OpenIddict": {
-    "Applications": {
+        "Applications": {
-      "MyProjectName_Web": {
+            "MyProjectName_Web": {
-        "ClientId": "MyProjectName_Web",
+                "ClientId": "MyProjectName_Web",
-        "ClientSecret": "1q2w3e*",
+                "ClientSecret": "1q2w3e*",
-        "RootUrl": "https://localhost:44302"
+                "RootUrl": "https://localhost:44302"
-      },
+            },
-      "MyProjectName_Blazor": {
+            "MyProjectName_Blazor": {
-        "ClientId": "MyProjectName_Blazor",
+                "ClientId": "MyProjectName_Blazor",
-        "RootUrl": "https://localhost:44307"
+                "RootUrl": "https://localhost:44307"
-      },
+            },
-      "MyProjectName_App": {
+            "MyProjectName_App": {
-        "ClientId": "MyProjectName_App",
+                "ClientId": "MyProjectName_App",
-        "RootUrl": "http://localhost:4200"
+                "RootUrl": "http://localhost:4200"
-      },
+            },
-      "MyProjectName_BlazorServerTiered": {
+            "MyProjectName_BlazorServerTiered": {
-        "ClientId": "MyProjectName_BlazorServerTiered",
+                "ClientId": "MyProjectName_BlazorServerTiered",
-        "ClientSecret": "1q2w3e*",
+                "ClientSecret": "1q2w3e*",
-        "RootUrl": "https://localhost:44309"
+                "RootUrl": "https://localhost:44309"
-      },
+            },
-      "MyProjectName_Swagger": {
+            "MyProjectName_Swagger": {
-        "ClientId": "MyProjectName_Swagger",
+                "ClientId": "MyProjectName_Swagger",
-        "RootUrl": "https://localhost:44305"
+                "RootUrl": "https://localhost:44305"
-      }
+            }
+        }
     }
-  }
 }

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.HostWithIds/appsettings.json

@@ -1,19 +1,19 @@
 {
-  "App": {
+    "App": {
-    "SelfUrl": "https://localhost:44305",
+        "SelfUrl": "https://localhost:44305",
-    "ClientUrl": "http://localhost:4200",
+        "ClientUrl": "http://localhost:4200",
-    "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200,https://localhost:44307",
+        "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200,https://localhost:44307",
-    "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
+        "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
-  },
+    },
-  "ConnectionStrings": {
+    "ConnectionStrings": {
-    "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName;Trusted_Connection=True"
+        "Default": "Server=localhost;Database=MyProjectNameHOossos;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true"
-  },
+    },
-  "AuthServer": {
+    "AuthServer": {
-    "Authority": "https://localhost:44305",
+        "Authority": "https://localhost:44305",
-    "RequireHttpsMetadata": "false",
+        "RequireHttpsMetadata": "false",
-    "SwaggerClientId": "MyProjectName_Swagger"
+        "SwaggerClientId": "MyProjectName_Swagger"
-  },
+    },
-  "StringEncryption": {
+    "StringEncryption": {
-    "DefaultPassPhrase": "gsKnGZ041HLL4IM8"
+        "DefaultPassPhrase": "gsKnGZ041HLL4IM8"
-  }
+    }
 }