IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> angular路由知识整理 -> 正文阅读

[JavaScript知识库]angular路由知识整理

基本路由配置

1.创建带路由的angular项目

//创建是在是否选择路由时选择yes
ng new my-app

2.创建组件并配置路由

//创建组件
ng g component name
//app-routing.module.ts中引入组件
const routes: Routes = [
  {path:'home',component:HomeComponent,},
  {path:'news',component:NewsComponent},
  {path:'product',component:ProductComponent},
  {path:'newsContent',component:NewsContentComponent},
  {path:'productContent',component:ProductContentComponent,}
];

3.页面中使用路由

<a [routerLink]="['/home']" routerLinkActive="active">首页</a> &nbsp;
<a [routerLink]="['/news']" routerLinkActive="active">新闻</a> &nbsp;
<a [routerLink]="['/productContent']" routerLinkActive="active">产品</a> &nbsp;

4.设置默认路由地址

const routes: Routes = [
  {path:'home',component:HomeComponent, },
  {path:'news',component:NewsComponent},
  {path:'product',component:ProductComponent},
  {path:'newsContent',component:NewsContentComponent},
  {path:'productContent',component:ProductContentComponent, },
  //匹配不到路由则跳转到home
  {path:'**',redirectTo:'home'}
];

路由传值

1. 静态传值

传值

<ul>
  <li *ngFor="let item of list;let key = index">
    <a [routerLink]="['/newsContent']" [queryParams]="{aid:key,name:'wo shi name'}">{{item}}</a>
  </li>
</ul>

接收

import {ActivatedRoute} from '@angular/router'

constructor(public router:ActivatedRoute) { }

this.router.queryParams.subscribe(data=>{
      console.log(data)
    })

2.页面动态传值

传值

//在router文件中声明传值变量
{path:'newsContent/:aid',component:NewsContentComponent},
//在页面中动态传值
<ul>
  <li *ngFor="let item of list;let key = index">
    <a [routerLink]="['/newsContent',key]">{{item}}</a>
  </li>
</ul>

接收

import {ActivatedRoute} from '@angular/router'

constructor(public router:ActivatedRoute) { }

this.router.params.subscribe(data=>{
      console.log(data)
 })

3.js动态跳转传值

//在router文件中声明传值变量
{path:'productContent/:aid',component:NewsContentComponent},

//引用router包
import { Router } from '@angular/router';
//通过router进行动态传值
goProductContent(){
    //动态js传值
    this.router.navigate(['/productContent/','1234'])
  }

4.get传值动态跳转路由

//引入依赖包
import { Router,NavigationExtras } from '@angular/router';
//使用NavigationExtras 定义queryParams
getNewsContent(){
    //跳转并进行传值
    let queryParams:NavigationExtras = {
      queryParams:{'aid':123}
    }
    this.router.navigate(['/productContent/'],queryParams)
  }

父子路由

1.app-routing.moudle.ts文件中声明子路由

{
    path:'home',component:HomeComponent,
    //子路由
    children:[
      {path: 'setting', component: SettingComponent},
      {path: 'welcome', component: WelcomeComponent},
      //进入页面时的默认路由
      {path:'**',redirectTo:'welcome'}
    ]
  },

2.父路由中嵌套子路由

<div class="product-list">
  <div class="left">
    <a [routerLink]="['/home/welcome']">欢迎首页</a><br><br>
    <a [routerLink]="['/home/setting']">系统设置</a>
  </div>
  <div class="right">
    <!--加载子路由界面-->
    <router-outlet></router-outlet>
  </div>
</div>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-26 12:02:06  更:2021-08-26 12:03:38 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 12:57:06-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码