zoukankan      html  css  js  c++  java
  • angular 路由


    <router-outlet></router-outlet>
    根目录下面创建 app-routing-module.ts
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    const routes: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
    {path: '**', redirectTo: 'home'}
    ]

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

    app.module.ts
    import { AppRoutingModule } from './app-routing-module';

    imports: [
    AppRoutingModule
    ],

    <a routerLink="/home" routerLinkActive="w100">333</a>

    跳转的时候传值

    <a [routerLink] = "['/news']" [queryParams]="{ddd: 'news'}">新微页面</a>

    获取路由的传值
    import { ActivatedRoute } from '@angular/router'

    组件里面获取
    import { ActivatedRoute } from '@angular/router';
    constructor(
    public route: ActivatedRoute
    ) { }
    this.route.queryParams.value.ddd
    this.route.queryParams.subscribe((data) => {
    console.log(data);
    })

    传动态路由的值
    <a routerLink = "/news/{{4}}" [queryParams]="{ddd: 'news'}">新微页面</a>
    <a [routerLink] = "['/news/', 4]" [queryParams]="{ddd: 'news'}">新微页面</a>
    获取动态路由的值
    this.route.params.subscribe((data) => {
    console.log(data);
    });

    js动态路由
    import { Router } from '@angular/router';
    constructor(
    public router: Router
    ) { }
    this.router.navigate(['/news', 3]);

    this.router.navigate(['/login'], {
    queryParams: {
    addd: '111'
    }
    });
    或者
    import { NavController } from '@ionic/angular';
    constructor(
    public nav: NavController
    ) { }
    goBack () {
    this.nav.navigateBack('/tabs/' + this.baclUrl);
    this.nav.navigateForward('/serach');
    }

    组件里面获取动态路由
    import { ActivatedRoute } from '@angular/router';
    this.route.params.subscribe((data) => {
    console.log(data);
    });

    懒加载
    { path: 'news', loadChildren: './components/news/news.component#模块名字expoer class 名字'},

    1.以根路由跳转
    /login

    this.router.navigate(['login']);

    2.设置relativeTo相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute


    this.router.navigate(['login', 1],{relativeTo: route});


    3.路由中传参数
    /login?name=1

    this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

    4.preserveQueryParams默认值为false,设为true,保留之前路由中的查询参数
    /login?name=1 to /home?name=1

    this.router.navigate(['home'], { preserveQueryParams: true });

    5.路由中锚点跳转 /home#top

    this.router.navigate(['home'],{ fragment: 'top' });

    6.preserveFragment默认为false,设为true,保留之前路由中的锚点
    /home#top to /role#top

    this.router.navigate(['/role'], { preserveFragment: true });

    7.skipLocationChange默认为false,设为true,路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效


    this.router.navigate(['/home'], { skipLocationChange: true });

    8.replaceUrl默认为true,设为false,路由不会进行跳转


    this.router.navigate(['/home'], { replaceUrl: true });
    ---------------------
    作者:极地雪狼li
    来源:CSDN
    原文:https://blog.csdn.net/xuehu837769474/article/details/79663979
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    codeforces C. Fixing Typos 解题报告
    codeforces B. The Fibonacci Segment 解题报告
    codeforces B. Color the Fence 解题报告
    codeforces B. Petya and Staircases 解题报告
    codeforces A. Sereja and Bottles 解题报告
    codeforces B. Levko and Permutation 解题报告
    codeforces B.Fence 解题报告
    tmp
    API 设计 POSIX File API
    分布式跟踪的一个流行标准是OpenTracing API,该标准的一个流行实现是Jaeger项目。
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/14192000.html
Copyright © 2011-2022 走看看