zoukankan      html  css  js  c++  java
  • angular6之路由

    对于前端单页应用,路由一般由前端管理。在angular6中路由通过@angular/router模块实现。

    1、在app的根目录下新建app-routing.module.ts,需要引入RouteModule, Routes模块,

    import { RouterModule, Routes } from ‘@angular/router’

    2、配置路由信息:

    动态路由:

    {

      path: '/view/:id',

      component: viewComponent

    }

    可以在页面获取的路由参数id的具体值。

    3、配置ngModule
    @NgModule ({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })

    4、最后将模块导出
    export class AppRoutingModule {}
    在app.module.ts根模块中将AppRoutingModule在imports中引入
    在模板中<router-outlet></router-outlet>会显示匹配到的组件

    </html>


    路由跳转:
    方法一:
    routerLink属性绑定
    如:<a [routerLink]=“[‘/list/all’]”>
    <a [routerLink]=“[‘/list’, {foo:’foo’}]”> /list;foo=foo
    <a [routerLink]=“[‘/list]” [queryParams]="{debug: true}"> /list?foo=foo
    方法二:
    import {Router} from '@angular/router';
    private router: Router
    this.router.navigateByUrl('/list')

  • 相关阅读:
    Jackson
    Jackson
    SAX
    SAX
    JDK Tools
    JAXB
    linux系统mysql连接检查脚本
    linux系统ssh远程连接检查脚本
    linux系统带宽监测脚本
    linux系统web日志分析脚本
  • 原文地址:https://www.cnblogs.com/leejay6567/p/9538540.html
Copyright © 2011-2022 走看看