一级导航
详细步骤
1、创建angular项目
ng new angualrdemo08 --skip-install
进入项目cd angular08
,并下载各种包 。使用npm i
或cnpm i
命令
2、创建需要的组件
ng g component home
ng g component new
ng g component header
ng g component home/asideone
ng g component home/asidetwo
ng g componenthome/asidethree
等等
3、找到 app-routing.module.ts 配置路由
用命令创建的组件,会自动引入app.module.ts
文件里,把这些路径复制粘贴到app-routing.module.ts
文件里,如下示例,把这部分粘贴放到app-routing.module.ts
文件里:
import { HomeComponent } from './home/home.component';
import { NewComponent } from './new/new.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
import { HeaderComponent } from './header/header.component';
添加路由
const routes: Routes = [
{ path: '', redirectTo: '/header', pathMatch: 'full' },//默认路径
{ path:'header', component: HeaderComponent },
{ path:'home', component: HomeComponent},
{ path:'new', component: NewComponent },
{ path:'newscontent', component: NewscontentComponent },
{ path: '**', redirectTo: 'header'}
];
4、找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
这样,一级路由就配置完了
二级路由
1、在 app-routing.module.ts 配置路由引入组件
把创建的想放在二级目录下的组件引入进来,看上面第3步
import { OneComponent } from './home/one/one.component';
import { TwoComponent } from './home/two/two.component';
import { ThreeComponent } from './home/three/three.component';
配置路由(不同之处,重点)
children关键字不能改
给谁添加路由,就写在哪个子路由里,这里我给home写了子路由,在home页面里跳转的页面,自然以home为前置路由
{ path: '', redirectTo: '/header', pathMatch: 'full' },
{ path:'header', component: HeaderComponent },
{ path:'home',
component: HomeComponent,
children:[
{ path:'home/asideone', component: OneComponent },
{ path:'home/asidetwo', component: TwoComponent },
{ path:'home/asidethree', component: ThreeComponent }
]
},
2、配置 router-outlet 显示动态加载的路由
在home的页面里
<div class="aside">
<ul>
<li>
<a routerLink="home/asideone" nzSelected>1</a>
</li>
<li>
<a routerLink="home/asidetwo">2</a>
</li>
<li>
<a routerLink="home/asidethree">3</a>
</li>
</ul>
</div>
<div class="main">
<router-outlet></router-outlet>
</div>