原文引用https://www.dazhuanlan.com/2019/08/25/5d622ce6a5639/
1209(3-9)
两个部分的内容，第一个是左侧导航页面的跳转；第二个是点击不同按钮，出现不同的表单也
实战
一、页面跳转相关
- 在app.module中进行路由配置
1
2
3
4
5
6
7
8
9
10
11
|
//这个是路由的配置
const routeConfig: Routes = [
{path: 'stock', component: StockManageComponent}
]
//实际上是使用RouterModule.forRoot(routeConfig)注入路由的配置
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routeConfig)
]
|
2.增加content.html中的插座，使得在点击左侧的导航时，可以将右侧的插座进行改变
1
2
3
|
<section class="content">
<router-outlet></router-outlet>
</section>
|
3.修改menu中的路径
1
2
3
4
5
6
7
8
9
|
<a href="javascript:;" (click)="nav('stock')"><i class="fa fa-link"></i> <span>股票管理</span></a>
constructor(public router: Router) { }
ngOnInit() {
}
nav(url: string) {
this.router.navigateByUrl(url);
}
|
4.对于css的处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
export class MenuComponent implements OnInit {
menus: Array<Menu>;
currentMenuId: number;
constructor(public router: Router) { }
ngOnInit() {
this.menus = [
new Menu(1, '首页', 'index'),
new Menu(2, '股票管理', 'stock')
]
}
nav(menu: Menu) {
this.router.navigateByUrl(menu.Link);
this.currentMenuId = menu.id
}
}
export class Menu {
constructor(
public id: number,
public name: string,
public Link: string
) {
}
}
//如果循环体中menu.id == currentMenuId，那么[class.active]就被使用激活
<li *ngFor="let menu of menus" [class.active]='currentMenuId == menu.id'>
<a href="javascript:;" (click)="nav(menu)">
<i class="fa fa-link"></i>
<span>{{menu.name}}</span>
</a>
</li>
|
二、处理题头的文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//订阅事件，进行处理
export class ContentComponent implements OnInit {
public pageTitle: string;
public pageDesc: string;
constructor(
public router: Router
) {
// 订阅路由中导航结束的事件
router.events.filter(event => event instanceof NavigationEnd)
.subscribe((event: NavigationEnd) => {
if (event.url === '/dash') {
this.pageTitle = '首页'
console.log('首页');
} else if (event.url.startsWith('/stock')) {
this.pageTitle = '股票信息';
console.log('股票信息');
}
});
}
ngOnInit() {
}
}
<h1>
{{pageTitle}}
<small>{{pageDesc}}</small>
</h1>
|
三、表单的跳转
1
2
3
4
|
1.创建component stockForm
2.创建一个指向stockForm的路由，传参数，带过去
{path: 'stock/:id', component: StockFormComponent}
|
备注:生成新的组件(ng g c new-component)之后，要重启服务，这样才能显示相对应的组件