四、路由和路由跳转

安装启动完成后，出现下图：

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

首先我们要注册路由

在项目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>
路由器链接

现在，你已经有了配置好的一些路由，还找到了渲染它们的地方，但又该如何导航到它呢？固然，从浏览器的地址栏直接输入 URL 也能做到，但是大多数情况下，导航是某些用户操作的结果，比如点击一个 A 标签。

<nav>
    <a routerLink="/" routerLinkActive="active">首页</a>
    当我们访问http://localhost:4200/的时候我们打开对应的页面就是导入的IndexComponent文件
</nav>

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

运行ng serve显示如下效果：

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

最后效果如图：