fix(abc:reuse-tab): fix can't refresh current tab (#1529)

Author: cipchk

angular.json

@@ -75,7 +75,9 @@
               "ajv",
               "file-saver",
               "ajv-formats",
-              "date-fns"
+              "date-fns",
+              "extend",
+              "aos"
             ]
           },
           "configurations": {

packages/abc/reuse-tab/index.en-US.md

@@ -36,7 +36,7 @@ alainProvides.push({
 
 ```html
 <reuse-tab #reuseTab></reuse-tab>
-<router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
+<router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>
 ```
 
 > **Note: If you do not specify the `(activate)` event, you cannot refresh current tab when uncached.**

packages/abc/reuse-tab/index.zh-CN.md

@@ -36,7 +36,7 @@ alainProvides.push({
 
 ```html
 <reuse-tab #reuseTab></reuse-tab>
-<router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
+<router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>
 ```
 
 > **注意：若不指定 `(activate)` 事件，无法刷新未缓存过的当前标签页。**

packages/abc/reuse-tab/reuse-tab.component.ts

@@ -261,6 +261,13 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
     return false;
   }
 
+  /**
+   * 设置激活路由的实例，在 `src/app/layout/basic/basic.component.ts` 修改：
+   *
+   * @example
+   * <reuse-tab #reuseTab></reuse-tab>
+   * <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>
+   */
   activate(instance: NzSafeAny): void {
     this.srv.componentRef = { instance };
   }

schematics/ng-update/upgrade-rules/v14/index.spec.ts

@@ -1,6 +1,7 @@
 import { JsonObject } from '@angular-devkit/core';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 
+import { findFile } from '../../../utils/file';
 import { createAlainApp, migrationCollection } from '../../../utils/testing';
 
 describe('Schematic: ng-update: v14Rule', () => {
@@ -288,4 +289,17 @@ describe('Schematic: ng-update: v14Rule', () => {
     const content = tree.readJson('angular.json') as JsonObject;
     expect((content.cli as { schematicCollections: string[] }).schematicCollections).toContain(`ng-alain`);
   });
+
+  it('#fixReuseTabActiviteInHtml', async () => {
+    const layoutPath = findFile(tree, 'basic/basic.component.ts')!;
+    tree.overwrite(
+      layoutPath,
+      `
+    <router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
+    `
+    );
+    await runMigration();
+    const content = tree.get(layoutPath)!.content.toString('utf8');
+    expect(content).toContain(`(attach)`);
+  });
 });

schematics/ng-update/upgrade-rules/v14/index.ts

@@ -8,6 +8,7 @@ import {
   addAllowSyntheticDefaultImports,
   addPackage,
   addSchematicCollections,
+  findFile,
   logStart
 } from '../../../utils';
 import { UpgradeMainVersions } from '../../../utils/versions';
@@ -42,6 +43,24 @@ function addEslintPluginDeprecation(): Rule {
   };
 }
 
+function fixReuseTabActiviteInHtml(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const layoutPath = findFile(tree, 'basic/basic.component.ts');
+    if (!tree.exists(layoutPath)) return;
+
+    let layoutContent = tree.get(layoutPath)!.content.toString('utf8');
+    const checkHtml = `<router-outlet (activate)="reuseTab.activate($event)"></router-outlet>`;
+    if (!layoutContent.includes(checkHtml)) return;
+
+    layoutContent = layoutContent.replace(
+      checkHtml,
+      `<router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>`
+    );
+    tree.overwrite(layoutPath, layoutContent);
+    logStart(context, `Fix can't refresh current item in resut-tab (https://github.com/ng-alain/ng-alain/issues/2302)`);
+  };
+}
+
 function finished(): Rule {
   return (_tree: Tree, context: SchematicContext) => {
     context.addTask(new NodePackageInstallTask());
@@ -64,6 +83,7 @@ export function v14Rule(): Rule {
       // https://angular.io/guide/build#configuring-commonjs-dependencies
       addAllowedCommonJsDependencies([]),
       fixSchematicCollections(context),
+      fixReuseTabActiviteInHtml(),
       addEslintPluginDeprecation(),
       finished()
     ]);

schematics/utils/file.ts

@@ -18,6 +18,16 @@ export function readContent(tree: Tree, filePath: string): string {
   return tree.read(filePath).toString('utf-8');
 }
 
+export function findFile(tree: Tree, fileName: string): string | undefined {
+  let res: string = undefined;
+  tree.visit(path => {
+    if (res == null && path.endsWith(fileName)) {
+      res = path;
+    }
+  });
+  return res;
+}
+
 export interface OverWriteFileOptions {
   tree: Tree;
   filePath: string;

src/dev/layout.component.ts

@@ -82,7 +82,7 @@ const ICONS = [
         </nz-dropdown-menu>
       </ng-template>
       <reuse-tab [mode]="2" [customContextMenu]="customContextMenu" #reuseTab></reuse-tab>
-      <router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
+      <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)"></router-outlet>
     </layout-default>
     <setting-drawer></setting-drawer>
   `,

src/dev/pages/page.component.ts

@@ -26,6 +26,6 @@ export class DevPageComponent implements OnInit {
 
   _onReuseInit(): void {
     this.now = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
-    console.log('by _onReuseInit', this.route.snapshot.url.toString());
+    console.log('by _onReuseInit', this.id);
   }
 }