angular从入门到精通(四) — 路由和路由跳转

angular从入门到精通(四) — 路由和路由跳转

四、路由和路由跳转

安装启动完成后,出现下图:

image.png

下一步的动作就是进行页面搭建路由跳转,为此,我要使用 Angular 的路由器。借助 Angular 路由器,实现路由器可以从一个视图导航到另一个视图。

首先我们要注册路由

image.png

在项目src/app/app.module.ts下


// 引入路由组件

import { IndexComponent } from './index/index.component';


// 注册模型

//路由数组
const routes: Routes = [
  {
   path      : '',
   component: IndexComponent
  }
];
@NgModule({
  declarations: [ // 暴露
    IndexComponent,
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
  ],
  exports: [
    RouterModule,
  ]
})

BrowserModule :导出所有 Angular 应用都需要的基础设施。默认包含在用 CLI 的 new 命令创建的所有 Angular 应用中。 它二次导出了 CommonModule 和 ApplicationModule,以便它们的导出物和提供商能用于所有应用中。

RouterModule :添加路由器指令和服务提供商。

forRoot() :创建一个带有所有路由器服务提供商和指令的模块。它还可以(可选的)设置一个应用监听器,来执行首次导航。

这里的路由数组 routes 描述如何进行导航。 把它传给 RouterModule.forRoot() 方法并传给本模块的 imports 数组就可以配置路由器。

每个 Route 都会把一个 URL 的 path 映射到一个组件。 注意,path 不能以斜杠(/开头。 路由器会为解析和构建最终的 URL,这样当你在应用的多个视图之间导航时,可以任意使用相对路径和绝对路径。

路由出口

RouterOutlet 是一个来自路由模块中的指令,它的用法类似于组件。 它扮演一个占位符的角色,用于在模板中标出一个位置,路由器将会把要显示在这个出口处的组件显示在这里。

<router-outlet></router-outlet>
<nav>
  <a routerLink="/" routerLinkActive="active">首页</a>
</nav>

当我们访问http://localhost:4200/的时候我们打开对应的页面就是导入的IndexComponent文件

index.component.html

<div class="navbar custom-navbar navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- logo按钮 -->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" (click)="openMenu()">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <!-- lOGO -->
            <a [routerLink]="['/']" class="navbar-brand">lOGO</a>
        </div>
        <!-- 公共导航组件 -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a [routerLink]="['/']" class="smoothScroll">首页</a></li>
            </ul>
        </div>
    </div>
</div>
<div style="margin-top:93px; color: #fff;">
    我是首页
</div>

index.component.scss


/deep/body{
    height: 100vh !important;
    width: 100% !important;
    display: inline-table;
    background-color: #222325 !important;
}
/*/deep/.slides link ng-star-inserted left-side right-side slide-out-right{*/
/deep/ .slideshow-container .slides .slide-in-right{
    top: 100% !important;
}
.silder-text {
  h2 {
      font-family: 'Poppins', sans-serif !important;
    font-size: 50px;
    font-weight: 900;
    color: white;
    padding-left: 30px;
    line-height: 1.5em;
  }
}
.home-slider{
    font-family: 'Poppins', sans-serif !important;
    width: 100%;
    position: relative;
    float: left;
}
/deep/.slideshow-container .caption{
  position: absolute;
  top: 40%;
  left: 0;
  font-size: 50px;
  font-weight: 600;
  color: white;
  padding-left: 30px;
  line-height: 1.5em;
    font-family: 'Poppins', sans-serif !important;
}
@media screen and (max-width: 767px) {
  /deep/.slideshow-container .caption{
    position: absolute;
    top: 40%;
    left: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
    padding-left: 30px;
    line-height: 1.5em;
    font-family: 'Poppins', sans-serif !important;
  }
    .silder-text {
        position: absolute;
        top: 40%;
        left: 0;
        h2 {
            font-size: 40px;
            color: white;
            padding-left: 30px;
            line-height: 1.5em;
        }
    }
}
/deep/.arrow-container.next {
    left: 100px !important;
}
/deep/ .slideshow-container .arrow-container .next {
    left: 60px !important;
}
/deep/ .slideshow-container .arrow-container .prev {
    left: 60px !important;
}
/deep/ .slideshow-container .arrow-container.next {
    right: 100% !important;
}
/deep/.slideshow-container .arrow-container .arrow.prev{
    position: absolute !important;
    bottom: 80px !important;
}
/deep/.slideshow-container .arrow-container .arrow.next{
    position: absolute !important;
    bottom: 70px !important;
}

index.component.ts

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
  constructor() {
      this.openMenu();
  };
  ngOnInit() {
  }
  openMenu(){
    $('body').removeClass('noScroll');
    if ($('.collapse').hasClass('collapse-active')) {
     $('.collapse').removeClass('collapse-active');
    }
    else {
     $('.collapse').addClass('collapse-active');
    }
  }
}

这里样式文件我用的scss文件,所有你需要安装scss并进行配置

修改angular.json,下的styles把css换成scss

image.png


运行ng serve显示如下效果:

image.png

,我们依次添加如下组件内容与IndexComponent一样修改一下名称按照以上步骤注册一遍即可:

image.png


最后效果如图:

jdfw.gif



追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容