• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:angular6.0的路由使用

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

    作者: 分类:angular开发 点击: 943 次
    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组件分别设置了路由以及默认路由。



      QQ二维码

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

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

    或许你会感兴趣的文章:

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

    1. asd123456说道:

      很有用,刚好在学angular,谢谢!

    2. qian1818说道:

      都是这个套路的,赚积分…
      新手难道不该送送几个积分么?

    3. yefan888说道:

      我也是赚积分的呢哈哈哈哈

    4. ajianmeige说道:

      我是来赚积分得,哈

    5. eric说道:

      进来看看

    发表评论

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

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