IT技术互动交流平台

应该是Angular2的一个bug?

作者:baidixing  发布日期:2016-09-27 20:57:26

     为了应对未来的趋势,及时赶上下一趟互联网技术,我最近也在通过具体项目研究angular2,首先必须要吐槽的是,学习angular2的成本本身不高,但是一堆的工具、配置实在让人 很是焦灼,就像asp.net core一样,所有的东西都在向同样的方向迈进:尽量使用已经造好的轮子,而不是自己再弄一个。

     当然,统一是好的,但是对于对前端不是太敏感的我来说,还是挑战不小,这就要求我要学好angular2,必须要熟悉一系列的工具链。加油。

今天要说的是一个可以说我遇到的很诡异的问题,我在angular1上进行了相同的尝试,没有发现这个问题,但是在angular2上发现了,我将使用场景还原一下,当然我只是抽取其中的一部分,希望有人遇到或知道如何解决回复一下,当然如果我找到答案,会注明。

    背景:我通过angular2 下叫ng2,的路由来实现视图的导航,我使用官方文档英雄列表来说明。我从英雄列表页面通过路由导航到具体的详情页面,但是我准备实现从详情页面导航到列表页面时出现的问题。

  我自己尝试了几种实现方式:

 window.history.back():通过浏览器的回退实现 通过router.navigate(['/heros']).其中router通过构造函数进行注入

我要说明的问题就是通过第二种实现。

 步骤1:新建index.html页面,没有什么特别的地方,只是设置了ng2的启动页面
 1 <!DOCTYPE html>
 2     <html lang='en'>
 3     <head>
 4         <meta charset='UTF-8'>
 5         <title>guozhiqi</title>
 6         <meta name='viewport' content='width=device-width,initial-scale=1'>
 7         <link rel='stylesheet' type='text/css' href='node_modules/primeng/resources/themes/delta/theme.css' />
 8         <link rel='stylesheet' type='text/css' href='node_modules/font-awesome/css/font-awesome.css' />
 9         <link rel='stylesheet' type='text/css' href='node_modules/primeng/resources/primeng.min.css' />
10         <base href='/'>
11     </head>
12     <body>
13     
14     <my-app>
15         Loading...
16     </my-app>
17     
18     <script src='node_modules/core-js/client/shim.js'></script>
19     <script src='node_modules/reflect-metadata/Reflect.js'></script>
20     <script src='node_modules/zone.js/dist/zone.js'></script>
21     <script src='node_modules/systemjs/dist/system.js'></script>
22     <script src='systemjs.config.js'></script>
23     <script>
24         System.import('app').catch(function (err) {
25             console.error(err);
26         })
27     </script>
28     
29     </body>
30     </html>
步骤2:新建app文件夹,并且添加main.ts页面
1 /**
2  * Created by guozhiqi on 2016/9/19.
3  */
4 import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
5 import {AppModule}from './app.module';
6 import {RouterModule}from '@angular/router';
7 
8 const  platform=platformBrowserDynamic();
9 platform.bootstrapModule(AppModule);

添加ng2的启动模块AppModule

在app文件夹添加app.module.ts文件
  
 1 import './rxjs-extensions';
 2 
 3 import { NgModule }      from '@angular/core';
 4 import { BrowserModule } from '@angular/platform-browser';
 5 import { FormsModule }   from '@angular/forms';
 6 import { HttpModule }    from '@angular/http';
 7 
 8 // Imports for loading & configuring the in-memory web api
 9 import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
10 import { InMemoryDataService }  from './in-memory-data.service';
11 
12 import { AppComponent }         from './app.component';
13 import { DashboardComponent }   from './dashboard.component';
14 import { HerosComponent }      from './heros.component';
15 import { HeroDetailComponent }  from './hero-detail.component';
16 import { HeroService }          from './hero.service';
17 import { HeroSearchComponent }  from './hero-search.component';
18 import { routing }              from './app.routing';
19 import {RouterModule,Router}from '@angular/router';
20 
21 @NgModule({
22     imports: [
23         BrowserModule,
24         FormsModule,
25         HttpModule,
26         InMemoryWebApiModule.forRoot(InMemoryDataService),RouterModule,
27         routing
28     ],
29     declarations: [
30         AppComponent,
31         DashboardComponent,
32         HeroDetailComponent,
33         HerosComponent,
34         HeroSearchComponent
35     ],
36     providers: [
37         HeroService
38     ],
39     bootstrap: [ AppComponent ]
40 })
41 export class AppModule {
42 }
43 
44 
45 /*
46  Copyright 2016 Google Inc. All Rights Reserved.
47  Use of this source code is governed by an MIT-style license that
48  can be found in the LICENSE file at http://angular.io/license
49  */

重点是我们导入了RoutingModule模块

添加路由配置app.routing.ts
 1 import {ModuleWithProviders}from '@angular/core';
 2 import {Routes, RouterModule}from '@angular/router';
 3 import {HerosComponent}from './heros.component';
 4 import {DashboardComponent}from './dashboard.component';
 5 import {HeroDetailComponent}from './hero-detail.component';
 6 const appRoutes:Routes = [
 7     {
 8         path: 'heros',
 9         component: HerosComponent
10     },
11     {
12         path:'dashboard',
13         component:DashboardComponent
14     },
15 
16     {
17         path:'detail/:id',
18         component:HeroDetailComponent
19     },
20     {
21         path:'',
22         redirectTo: '/dashboard',
23         pathMatch: 'full'
24     },
25     {
26         path:'**',
27         component:DashboardComponent
28     }
29 ]
30 
31 export const  routing:ModuleWithProviders=RouterModule.forRoot(appRoutes);
添加英雄列表页面heros.component.ts
 1 /**
 2  * Created by guozhiqi on 2016/9/19.
 3  */
 4 import {Component, OnInit}from '@angular/core';
 5 import {Title}from '@angular/platform-browser';
 6 import {ButtonModule}from 'primeng/primeng';
 7 import {Hero}from './hero';
 8 import {HeroService} from './hero.service';
 9 import {HeroDetailComponent}from './hero-detail.component';
10 import {Router}from '@angular/router';
11 
12 @Component({
13     selector: 'my-heros',
14     templateUrl: 'app/heros.component.html',
15     styleUrls: ['app/heros.component.css']
16 })
17 
18 export class HerosComponent implements OnInit {
19     heros:Hero[];
20     selectedHero:Hero;
21 
22     ngOnInit():void {
23         this.getHeros();
24     }
25 
26     getHeros():void {
27         this.heroService.getHeroes().then(heros=>this.heros = heros);
28     }
29 
30     onSelect(hero:Hero) {
31         this.selectedHero = hero;
32     }
33 
34     gotoDetail() {
35         this.router.navigate(['/detail', this.selectedHero.id]);
36     }
37 
38     add(name:string):void {
39         name = name.trim();
40         if (!name) {
41             return;
42         }
43 
44         this.heroService.create(name)
45             .then(hero=>{
46                 this.heros.push(hero);
47                 this.selectedHero=null;
48             });
49     }
50 
51     delete(hero:Hero):void
52     {
53         this.heroService.delete(hero.id)
54             .then(()=>{
55                 this.heros=this.heros.filter(h=>h!==hero);
56                 if(this.selectedHero===hero)
57                 {
58                     this.selectedHero=null;
59                 }
60             })
61     }
62 
63     constructor(private  router:Router, private titleService:Title, private heroService:HeroService) {
64         this.titleService.setTitle('HeroList');
65     }
66 
67 
68 }

重点就出现在我们通过构造函数注入的Router上,我们的英雄列表通过router.navigate(

['/detail', this.selectedHero.id]

)来导航到了详情页面,请注意,router是通过构造函数注入

详情页面组件代码
 1 /**
 2  * Created by guozhiqi on 2016/9/19.
 3  */
 4 import {Component, Input, OnInit}from'@angular/core';
 5 import {ActivatedRoute, Params, Router}from'@angular/router';
 6 import {HeroService}from './hero.service';
 7 import {Title}from '@angular/platform-browser';
 8 import {Hero} from './Hero';
 9 import from = require('core-js/fn/array/from');
10 
11 @Component({
12     selector: 'my-hero-detail',
13     templateUrl: 'app/hero-detail.component.html',
14     styleUrls: ['app/hero-detail.component.css'],
15 })
16 
17 export class HeroDetailComponent implements OnInit {
18     hero:Hero;
19     currentDate:Date;
20     private router:Router;
21 
22     constructor(private heroService:HeroService,
23                 private  route:ActivatedRoute,
24                 router:Router,
25                 private  title:Title) {
26         this.currentDate = new Date();
27 
28         this.title.setTitle('hero-detail');
29     }
30 
31     ngOnInit():void {
32         this.route.params.forEach((params:Params)=> {
33             let id = +params['id'];
34             this.heroService.getHero(id).then(hero=>this.hero = hero);
35         });
36     }
37 
38     goBack():void {
39         window.history.back();
40         //   this.router.navigate(['/heros']);
41 
42     }
43 
44     save():void {
45         this.heroService.update(this.hero).then(this.goBack);
46     }
47 }

重点是详情页面的goBack()方法,我本来准备通过路由的navigate方法 来实现导航,并且router是通过构造函数注入,但是我在使用时this.router会为null,导致我无法通过这种方式实现页面跳转。

其实我想说的这个倒不是ng2的bug,可能有些地方没有设置成功,之所以说是bug,而是因为官方没有提供具体的详细信息。

有知晓的麻烦回复一下,我相信如果要使用页面跳转,肯定会用到。

 更详细的内容可以参考官方的英雄列表。

延伸阅读:

  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规