Angular 中的路由

这篇具有很好参考价值的文章主要介绍了Angular 中的路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 使用 routerLink 指令 路由跳转

  1. 命令创建项目:
ng new ng-demo
  1. 创建需要的组件:
ng g component components/home
ng g component components/news
ng g component components/produect
  1. 找到 app-routing.module.ts 配置路由:
    引入组件:
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';

配置路由:

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', redirectTo: 'home'}
];
  1. 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由:
<h1>
  <a routerLink="/home" routerLinkActive="active">首页</a>
  <a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
<router-outlet></router-outlet>

routerLink 跳转页面默认路由:

//匹配不到路由的时候加载的组件 或者跳转的路由
{path: '**', redirectTo: 'home'}

routerLinkActive: 设置 routerLink 默认选中路由

<h1>
  <a routerLink="/home" routerLinkActive="active">
    首页
  </a>
  <a routerLink="/news" routerLinkActive="active">
    新闻
  </a>
</h1>

.active {
  color: green;
}
<h1>
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
    <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

2 使用方法跳转路由 - 使用 router.navigate 方法

在组件中注入 Router 服务,并使用 navigate 方法进行路由跳转:文章来源地址https://www.toymoban.com/news/detail-770590.html

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }

  goToPage(path: string) {
    this.router.navigate([path]).then(r => {})
  }
}
<h1>
  <button (click)="goToPage('home')">首页</button>
  <button (click)="goToPage('news')">新闻</button>
</h1>
<router-outlet></router-outlet>

3 routerLink跳转页面传值 - GET传值的方式

  1. 页面跳转 - queryParams属性是固定的:
<h1>
  <a routerLink="/home" routerLinkActive="active" [queryParams]="{name: 'index'}">首页</a>
  <a routerLink="/news" routerLinkActive="active" [queryParams]="{name: 'news'}">新闻</a>
</h1>
<router-outlet></router-outlet>
  1. 获取参数方式:
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(data => {
      console.log(data)
    })
  }
}

4 使用方法跳转页面传值 - GET传值的方式

<h1>
    <button (click)="goToPage('home', 'home')">首页</button>
    <button (click)="goToPage('news', 'news')">新闻</button>
</h1>
<router-outlet></router-outlet>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }

  goToPage(path: string, param: string) {
    this.router.navigate([path], {
      queryParams: {
        name: param
      }
    }).then(r => {})
  }
}

5 动态路由的方式-路由跳转

  1. 配置路由文件:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
import {ProductComponent} from "./components/product/product.component";

const routes: Routes = [
  {path: 'home/:id', component: HomeComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
  1. 页面设置参数:
<h1>
  <a [routerLink]="['/home', '1000']" routerLinkActive="active">首页</a>
</h1>
<router-outlet></router-outlet>
  1. 参数接受:
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe(data => {
      console.log(data)
    })
  }
}

6 父子路由

  1. 创建组件引入组件
import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
  1. 配置路由
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'news',
        component: NewsComponent
      },
      {path: '**', redirectTo: 'home'}
    ]
  },
  {path: '**', redirectTo: 'home'}
];

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

}

  1. 父组件中定义router-outlet
<router-outlet></router-outlet>

到了这里,关于Angular 中的路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • angular框架简介基础与使用(全文2w8字)前端框架angular

    本文的所有内容,可以在我的博客上看到,下面是地址。建议去博客看,因为csdn的这篇图片我没上传。 可以转载,但请注明出处 我的博客—点击跳转 https://numb.run Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀

    2024年02月02日
    浏览(45)
  • Angular16的路由守卫基础使用

    使用 ng generate guard /guard/login 命令生成guard文件 因新版Angular取消了CanActivate的使用,改用CanActivateFn,因此使用router跳转需要通过inject的方式导入。 在路由文件中,对需要守卫的路由地址配置guard

    2024年02月12日
    浏览(33)
  • Angular中如何获取URL参数?

    Angular中的ActivatedRoute中保存着路由信息,可用来提取URL中的路由参数。 route.snapshot是一个路由信息的静态快照,抓取自组建刚刚创建完毕之后。 paramMap是一个从URL中提取的路由参数值的字典。id对应的值就是要获取的用户的id,路由参数总是一个字符串,JavaScript中的“+”操作

    2024年02月11日
    浏览(41)
  • 如何在 Angular 中使用懒加载路由

    简介 延迟加载 是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。 默认情况下,Angular 使用 急切加载 来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的,但在某些情况下,这种加载时

    2024年02月20日
    浏览(38)
  • Angular:引领未来的前端框架

    Angular是一款由Google开发的强大前端框架,具有丰富的特性和卓越的性能。本文将介绍Angular的基本概念、特点、应用场景以及与其他框架的对比。 一、引言 随着Web应用程序的日益复杂,前端框架在开发过程中扮演着越来越重要的角色。Angular作为一款由Google主导的前端框架,

    2024年01月22日
    浏览(46)
  • 2023.07.07面试偏前端angular

    ==和===是JavaScript中的两个比较运算符,用于比较两个值的相等性。 ==是松散相等运算符,它会进行类型转换后再比较值是否相等。如果两个值的类型不同,==会尝试将它们转换为相同的类型,然后再进行比较。例如,1 == \\\'1\\\'会返回true,因为它们在进行比较之前会被转换为相同

    2024年02月13日
    浏览(41)
  • 前端Angular框架基础知识(一)

    1.1 数据绑定 数据驱动DOM:将组件 类 (.ts文件)中的数据显示在组件 模板 (.html文件)中,当类中的数据发生变化会自动同步到模板中. Angular中使用差值表达式进行数据绑定, {{ }}语法 1.2 属性绑定 1.2.1 普通属性 使用【属性名称】为元素绑定DOM对象属性 使用【attr.属性名称】为元

    2024年01月17日
    浏览(40)
  • 三大前端技术(React,Vue,Angular)

    React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Red

    2024年02月09日
    浏览(55)
  • angular实现自定义模块路由懒加载;配置自定义模块路由及子路由

    图片中绿色表示新建的文件;黄色表示被更改的文件; 1、创建一个新的项目 2、创建一个用户模块,并配置路由 如图: 3 、在module/模块下创建user组件 如图: 4、实现路由懒加载 依次修改下列几个文件: #1 user-routing.module.ts

    2024年02月09日
    浏览(37)
  • Angular中的组件

    组件简介 Angular中的组件,是一个使用 @component()装饰器 装饰的特殊类,同时在这个装饰器中指定 元数据 ,元数据包括 组件选择器 、 组件模板 、 组件样式 等。 组件是angular模块化的一个基本的组成元素。日常开发中,页面通常就是由一个或者多个组件堆叠而成。 组件的元

    2023年04月08日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包