安装启动完成后,出现下图:
下一步的动作就是进行页面搭建路由跳转,为此,我要使用 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一样修改一下名称按照以上步骤注册一遍即可:
最后效果如图:
本文地址:https://www.zhuimengzhu.com/details/209.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。