首页 > angular开发 > angular6.0使用教程:angular6.0的路由使用

angular6.0使用教程:angular6.0的路由使用

作者: 分类:angular开发 点击: 105 次
wordpress CMS主题:ssmay主题

    前面的angular6.0教程文章中,我们实现的数据调用和展示都是在同一个页面的。而我们开发的angular6.0的项目不可能只有一个页面,如:网站首页、文章列表页、文章详情页,我们想要的效果是,home页面显示home内容,而list页面显示list列表内容。angular6.0要想实现多页面展示,需要通过路由来实现。那么,怎么来使用angular6.0路由呢?

    第一步:给项目添加angular6.0路由模块:

    添加angular路由分为2种情况:

    情况1:新建项目时就添加路由:

    ng  new  demo  --routing   【新建demo项目的同时,就创建好angular路由】

    情况2:在老项目中添加路由【即项目已创建好了,只是没有添加路由】:

    ng  g  module  app-routing  --flat  --module=app

    能过上面的命令,在项目app目录下会创建一个app-routing.module.ts文件,并且同时在app.module.ts文件中自动添加对app-routing路由的引入和声明,而不需要手动引入。

    第二步:在app-routing文件中引入RouterModule模块【如果是情况1添加的路由,可以省略这一步】:

    import { Routes, RouterModule } from '@angular/router';
    const routes: Routes = [];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })

    第三步:为项目设置路由:

    根据前面章节我们创建的组件,有home组件和list组件,在没有设置angular6.0路由时,我们在浏览器地址栏中输入地址:http://localhost:4200/home和http://localhost:4200/list时,页面展示的内容不会发生变化。我们来为home和list来设置路由:

    const routes: Routes = [
      //地址栏是home时调用homecomponent组件
      { path:'home', component:HomeComponent },
      //地址栏是list时调用listcomponent组件
      { path:'list', component:ListComponent },
      //地址栏是任意字符时,调用 homecomponent组件,即默认路由
      { path:'**', redirectTo:'/home' } //这里是2个*号,这个必须放在最后面
    ];

    通过上面几步,我们就为项目添加了angular6.0路由功能,并为项目的home组件和list组件分别设置了路由以及默认路由。

文章作者:高时银博客
本文地址:http://wanlimm.com/77201806275732.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:
wordpress CMS主题:ssmay主题

或许你会感兴趣的文章:

一条回应:“angular6.0使用教程:angular6.0的路由使用”

  1. eric说道:

    进来看看

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.