码迷,mamicode.com
首页 > 其他好文 > 详细

angular05

时间:2019-08-25 16:01:56      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:信息   java   navig   struct   部分   section   文字   class   url   

原文引用https://www.dazhuanlan.com/2019/08/25/5d622ce6a5639/


1209(3-9)

两个部分的内容,第一个是左侧导航页面的跳转;第二个是点击不同按钮,出现不同的表单也

实战

一、页面跳转相关

  1. 在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)之后,要重启服务,这样才能显示相对应的组件

angular05

标签:信息   java   navig   struct   部分   section   文字   class   url   

原文地址:https://www.cnblogs.com/petewell/p/11408073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!