通过覆盖可扩展性定制导航栏

如果您有使用差分方法扩展菜单选项以外的用例，那么可以覆盖导航栏。

过程

将 nav-bar 文件夹从 <store-temp>/packages/features/nav-bar 复制到 <store-temp>/extensions/features。
将 nav-bar 文件夹重命名为 custom-nav-bar。

将位于 <store-temp>/extensions/features/custom-nav-bar 的 package.json 文件的内容替换为以下内容。

{
"name": "@store-extensions/custom-nav-bar",
"version": "0.0.1",
"private": true,
"scripts": {
"ng": "ng",
"build-app:extension": "ng build custom-nav-bar --configuration production",
"view-stats": "ng build custom-nav-bar --configuration production --stats-json && npx webpack-bundle-analyzer ../../../dist/store-frontend/custom-nav-bar/stats.json",
"start-app": "ng serve --project custom-nav-bar"
},
"dependencies": {
}
}

在位于 <store-temp>/angular.json的 angular.json 文件中为 custom-nav-bar 应用程序添加以下条目。

"custom-nav-bar": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "extensions/features/custom-nav-bar",
      "sourceRoot": "extensions/features/custom-nav-bar/src",
      "prefix": "isf",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/store-frontend/custom-nav-bar",
            "index": "extensions/features/custom-nav-bar/src/index.html",
            "main": "extensions/features/custom-nav-bar/src/main.single-spa.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "extensions/features/custom-nav-bar/tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "extensions/features/custom-nav-bar/src/favicon.ico",
              "extensions/features/custom-nav-bar/src/assets"
            ],
            "styles": [
              "extensions/features/custom-nav-bar/src/styles.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "custom-nav-bar",
              "libraryTarget": "system"
            },
            "baseHref": "/isf/store-frontend/custom-nav-bar/",
            "preserveSymlinks": true
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "none"
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "custom-nav-bar:build:production"
            },
            "development": {
              "buildTarget": "custom-nav-bar:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "custom-nav-bar:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "extensions/features/custom-nav-bar/tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "extensions/features/custom-nav-bar/src/favicon.ico",
              "extensions/features/custom-nav-bar/src/assets"
            ],
            "styles": [
              "extensions/features/custom-nav-bar/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "packages/features/custom-nav-bar/**/*.ts",
              "packages/features/custom-nav-bar/**/*.html"
            ]
          }
        }
      }
    }

修改 import-map.json 以在 <store-temp>/extensions/override-static-assets/root-config/custom/import-map.json为 custom-nav-bar 添加条目。
```
"custom-nav-bar": "/custom-nav-bar/main.js"
```
要配置需要覆盖 nav-bar ，请更新位于 <store-temp>/extensions/override-static-assets/root-config/custom/extension-config.json的 extension-config.json 文件。
```
{
     …. other config
      "navbar":{

              "extended" : true
        }
      …. other config
   }
```

在 <store-temp>/app-config-overrides.json 文件的路径中添加 custom-nav-bar 条目。

"custom-nav-bar": {
      "useRemote": false,
      "devServerConfig": {
        "port": 6400,
        "contextRoot": "custom-nav-bar"
      }
    }

修改 AppComponent <store-temp>/extensions/features/custom-nav-bar/src/app/ 目录中提供的内容。
验证您的更改是否反映在导航栏中。
要在本地验证应用程序提供的扩展导航栏，请通过运行以下命令来启动应用程序:
```
yarn start-app
```