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')

  • 相关阅读:
    大数据概述
    语法分析-代码
    语法分析-C语言程序
    Hadoop综合大作业
    hive基本操作与应用
    理解MapReduce计算构架
    熟悉HBase基本操作
    爬虫大作业
    熟悉常用的HDFS操作
    数据结构化与保存
  • 原文地址:https://www.cnblogs.com/leejay6567/p/9538540.html
Copyright © 2011-2022 走看看