Angular实现一个简单的带tabs选项卡切换的首页导航功能

Angular版本：16.1.1

 项目结构：

angular.json配置：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-router": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-router",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-router:build:production"
            },
            "development": {
              "browserTarget": "angular-router:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-router:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

 package.json:

{
  "name": "angular-router",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.1",
    "@angular/cli": "~16.1.1",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

tsconfig.app.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

styles.scss全局样式表清除部分默认样式

/* You can add global styles to this file, and also import other style files */
*{
    margin: 0;
    padding: 0;
    border: 0;
}

一、ng命令添加4个页面组件（tabs,tab1,tab2,tab3,info），angular会自动把组件导入到app.module.ts中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 所有页面导入根模块
import { TabsComponent } from './tabs/tabs.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';
import { InfoComponent } from './info/info.component';

@NgModule({
  declarations: [
    AppComponent,
    TabsComponent,//声明所有页面组件
    Tab1Component,
    Tab2Component,
    Tab3Component,
    InfoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、在app.component.html里添加路由占位标签，根据路由规则，会把路由匹配的页面插入到这里显示，这里的会将路由规则中一级路由匹配到的组件插入，因为app.component.html是项目根模块中的页面

app.component.scss和app.component.ts默认无修改内容

三、在app.routing.module.ts里编写路由规则

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsComponent } from './tabs/tabs.component';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';
import { InfoComponent } from './info/info.component';
// 一级路由匹配到的页面在定义该路由规则所在的模块的组件中的中插入显示
//相应的，一级路由下匹配到的页面的子路由在相应页面的中显示
//这里一级路径在app模块（本项目根模块）中定义，则一级路由页面插入到app.component.html里的中
// 这里一级路由有2个分别为tabs和info页面，tabs页面的子路由匹配到的页面插入到tabs页面组件中的中显示
// tabs子路由有三个页面，在tabs中通过路由指令routerLink指定路径，配合tabs页面的即实现首页导航
const routes: Routes = [
  // 一级路由，输入http://localhost:port/默认导航到/tabs/tab1，
  //tabs是首页，带多个导航选项卡，点击切换不同内容
  //输入http://localhost:port/info则进入info页面，也可通过
 
  { 
    path:"tabs",
    component:TabsComponent,
    children:[
      //tabs的子路由，实现了一个首页导航tab切换选项卡，
      //输入http://localhost:port默认导航到/tabs/tab1页面
      {
        path:"tab1",
        component:Tab1Component
      },
      {
        path:"tab2",
        component:Tab2Component
      },
      {
        path:"tab3",
        component:Tab3Component
      },
      {//这里路径为空则会重定向到tabs/tab1
        //比如http://localhost:port/tabs就会默认到http://localhost:port/tabs/tab1
        path:"",
        redirectTo:"tabs/tab1",
        pathMatch:"full"
        
      }
    ]
  },
  {
    path:"info",
    component:InfoComponent
  },
  //这里路径为空就会重定向到tabs/tab1
  //比如http://localhost:port就会默认到http://localhost:port/tabs/tab1
  {
    path:"",
    redirectTo:"tabs/tab1",
    pathMatch:"full"
  }
 
 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

四、在tabs.component.html里编写页面，显示三个导航切换卡，tabs中的标签会根据tabs组件子路由的规则插入组件显示，实现顶部标签中的路由指令routerLink切换底部不同组件内容显示

    tab1
    tab2
    tab3

tabs.component.scss

nav{
    width: 100%;
    height: 60px;
    background-color: antiquewhite;
    display: flex;
}
a{
    flex: 1;
    text-align: center;
    height: 60;
    line-height: 60px;
    text-decoration:none;
}

tabs.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss']
})
export class TabsComponent {
  
}

五、编写tab1,tab2,tab3,info页面组件

1、tab1

tab1.component.html

tab1 works!
点击跳转info页面

tab1.component.scss

button{
    width: 100px;
    height: 100px;
}

tab1.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: './tab1.component.html',
  styleUrls: ['./tab1.component.scss']
})
export class Tab1Component {
  constructor(private router:Router){

  }
  go(){
    this.router.navigateByUrl("info");
  }
}

2、tab2

tab2.component.html

tab2 works!

tab2.component.scss和tab2.component.ts默认无修改内容

3、tab3

tab3.component.html

tab3 works!

tab3.component.scss和tab3.component.ts默认无修改内容

4、info

info.component.html

info works!

info.component.scss和info.component.ts默认无修改内容

至此全部编写完成，执行ng serve运行，默认首页http://localhost:4200/tabs/tab1，点击不同导航选项卡，下面显示不同组件的内容，点击tab1下的按钮会直接跳转到http://localhost:4200/info，info组件会替换tabs组件在app.component.html中显示，也就不会有顶部导航选项卡，因为导航选项卡是tabs组件中的

 

 

 Angular实现简单的首页顶部导航tabs切换