Angular implementa una función de navegación de página de inicio simple con cambio de pestañas

Mobile 2023-08-11 21:56:57 views: null

Versión angular: 16.1.1

 Estructura del proyecto:

configuración 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": []
          }
        }
      }
    }
  }
}

 paquete.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
  }
}

La hoja de estilo global styles.scss borra algunos estilos predeterminados

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

1. El comando ng agrega 4 componentes de página (pestañas, tab1, tab2, tab3, información) y angular importará automáticamente los componentes a 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 { }

2. Agregue una etiqueta de marcador de posición de ruta en app.component.html. De acuerdo con las reglas de enrutamiento, la página que coincida con la ruta se insertará aquí para su visualización. El <router-outlet></router-outlet> aquí será el primer nivel de la regla de enrutamiento Se inserta el componente que coincide con la ruta, porque app.component.html es una página en el módulo raíz del proyecto

<!-- index.html加载本页面组件，本页面只有一个路由占位标签 -->
<!-- 路由占位，会将本模块（这里是根模块）的一级路由对应页面插入进来显示 -->
<!-- 这里会将我们的一级路由的页面插入进来显示，当路由到tabs页面时也就是带导航选项卡的页面 -->
<!-- 本案例的一级路由有2个页面，分别是tabs和info，输入http://localhost:port/默认导航到tabs/tab1显示导航页，这个在定义的路由规则中可以看到 -->
<!-- 可以看到tabs页面组件中同样存在此占位标签，将tabs子路由的页面插入到tabs页面中<router-outlet></router-outlet>显示 -->
<router-outlet></router-outlet>

app.component.scss y app.component.ts no tienen contenido modificado por defecto

3. Escriba reglas de enrutamiento en 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';
// 一级路由匹配到的页面在定义该路由规则所在的模块的组件中的<router-outlet></router-outlet>中插入显示
//相应的，一级路由下匹配到的页面的子路由在相应页面的<router-outlet></router-outlet>中显示
//这里一级路径在app模块（本项目根模块）中定义，则一级路由页面插入到app.component.html里的<router-outlet></router-outlet>中
// 这里一级路由有2个分别为tabs和info页面，tabs页面的子路由匹配到的页面插入到tabs页面组件中的<router-outlet></router-outlet>中显示
// tabs子路由有三个页面，在tabs中通过路由指令routerLink指定路径，配合tabs页面的<router-outlet></router-outlet>即实现首页导航
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 { }

4. Escriba la página en tabs.component.html y muestre tres tarjetas de conmutación de navegación. La etiqueta <router-outlet></router-outlet> en las pestañas se insertará en la pantalla del componente de acuerdo con las reglas del subenrutamiento de el componente de pestañas para realizar la parte superior <a La instrucción de enrutamiento routerLink en la etiqueta ></a> cambia la visualización de contenido de diferentes componentes en la parte inferior


<nav>
    <a routerLink="/tabs/tab1">tab1</a>
    <a routerLink="/tabs/tab2">tab2</a>
    <a routerLink="/tabs/tab3">tab3</a>
</nav>
<!-- 路由占位，将tabs的子路由匹配到的页面插入到这里，上面a标签中的routerLink指令即是路由指令 -->
<!-- 点击上面任意a标签根据路由指令路径匹配到相关页面后插入到这里显示，即实现导航页 -->
<!-- 本页面有三个导航切换标签，点击tab1或其他会相应在<router-outlet></router-outlet>插入tab1页面或其他页面显示，这里实现了顶部导航切换，底部相应内容显示 -->
<!-- 在tab1中设置了一个按钮，点击会跳转到info页面，info和tabs为一级路由中定义的路由页面，会在app.component.html里的<router-outlet></router-outlet>中显示，即离开导航页，也就看不到导航选项卡 -->
<router-outlet></router-outlet>

pestañas.componente.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;
}

pestañas.component.ts

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

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

Cinco, escriba tab1, tab2, tab3, componentes de la página de información

1, mesa1

tab1.componente.html

<p>tab1 works!</p>
<button (click)="go()">点击跳转info页面</button>

tab1.componente.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, pestaña 2

tab2.componente.html

<p>tab2 works!</p>

tab2.component.scss y tab2.component.ts no tienen contenido modificado por defecto

3, tab3

tab3.componente.html

<p>tab3 works!</p>

tab3.component.scss y tab3.component.ts no tienen contenido modificado por defecto

4, información

info.componente.html

<p>info works!</p>

info.component.scss e info.component.ts no tienen contenido modificado por defecto

Hasta ahora, se completó toda la escritura, ejecute ng serve para ejecutar, la página de inicio predeterminada es http://localhost:4200/tabs/tab1, haga clic en diferentes pestañas de navegación, el contenido de los diferentes componentes se muestra a continuación, haga clic en el botón en tab1 para saltar directamente a http:/ /localhost:4200/info, el componente de información reemplazará el componente de pestañas y lo mostrará en app.component.html, por lo que no habrá una pestaña de navegación superior, porque la pestaña de navegación está en el componente de pestañas

 

 

 Angular implementa el cambio de pestañas de navegación superior de la página de inicio simple

Supongo que te gusta

Origin blog.csdn.net/weixin_44341110/article/details/131489540
Recomendado
Clasificación
Diario
Más
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)

Code World

© 2018 codetd.com