应该是Angular2的一个bug？
为了应对未来的趋势，及时赶上下一趟互联网技术，我最近也在通过具体项目研究angular2，首先必须要吐槽的是，学习angular2的成本本身不高，但是一堆的工具、配置实在让人 很是焦灼，就像asp.net core一样，所有的东西都在向同样的方向迈进：尽量使用已经造好的轮子，而不是自己再弄一个。
当然，统一是好的，但是对于对前端不是太敏感的我来说，还是挑战不小，这就要求我要学好angular2，必须要熟悉一系列的工具链。加油。
今天要说的是一个可以说我遇到的很诡异的问题，我在angular1上进行了相同的尝试，没有发现这个问题，但是在angular2上发现了，我将使用场景还原一下，当然我只是抽取其中的一部分，希望有人遇到或知道如何解决回复一下，当然如果我找到答案，会注明。
背景：我通过angular2 下叫ng2，的路由来实现视图的导航，我使用官方文档英雄列表来说明。我从英雄列表页面通过路由导航到具体的详情页面，但是我准备实现从详情页面导航到列表页面时出现的问题。
我自己尝试了几种实现方式：
- window.history.back()：通过浏览器的回退实现
- 通过router.navigate(['/heros']).其中router通过构造函数进行注入
我要说明的问题就是通过第二种实现。
- 步骤1：新建index.html页面，没有什么特别的地方，只是设置了ng2的启动页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>guozhiqi</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" />
<base href="/">
</head>
<body> <my-app>
Loading...
</my-app> <script src="node_modules/core-js/client/shim.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) {
console.error(err);
})
</script> </body>
</html> - 步骤2：新建app文件夹，并且添加main.ts页面
/**
* Created by guozhiqi on 2016/9/19.
*/
import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
import {AppModule}from './app.module';
import {RouterModule}from '@angular/router'; const platform=platformBrowserDynamic();
platform.bootstrapModule(AppModule);添加ng2的启动模块AppModule
- 在app文件夹添加app.module.ts文件
import './rxjs-extensions'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; // Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service'; import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { HerosComponent } from './heros.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
import { HeroSearchComponent } from './hero-search.component';
import { routing } from './app.routing';
import {RouterModule,Router}from '@angular/router'; @NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),RouterModule,
routing
],
declarations: [
AppComponent,
DashboardComponent,
HeroDetailComponent,
HerosComponent,
HeroSearchComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
} /*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/重点是我们导入了RoutingModule模块
- 添加路由配置app.routing.ts
import {ModuleWithProviders}from '@angular/core';
import {Routes, RouterModule}from '@angular/router';
import {HerosComponent}from './heros.component';
import {DashboardComponent}from './dashboard.component';
import {HeroDetailComponent}from './hero-detail.component';
const appRoutes:Routes = [
{
path: 'heros',
component: HerosComponent
},
{
path:'dashboard',
component:DashboardComponent
}, {
path:'detail/:id',
component:HeroDetailComponent
},
{
path:'',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path:'**',
component:DashboardComponent
}
] export const routing:ModuleWithProviders=RouterModule.forRoot(appRoutes); - 添加英雄列表页面heros.component.ts
/**
* Created by guozhiqi on 2016/9/19.
*/
import {Component, OnInit}from '@angular/core';
import {Title}from '@angular/platform-browser';
import {ButtonModule}from 'primeng/primeng';
import {Hero}from './hero';
import {HeroService} from "./hero.service";
import {HeroDetailComponent}from './hero-detail.component';
import {Router}from '@angular/router'; @Component({
selector: "my-heros",
templateUrl: 'app/heros.component.html',
styleUrls: ['app/heros.component.css']
}) export class HerosComponent implements OnInit {
heros:Hero[];
selectedHero:Hero; ngOnInit():void {
this.getHeros();
} getHeros():void {
this.heroService.getHeroes().then(heros=>this.heros = heros);
} onSelect(hero:Hero) {
this.selectedHero = hero;
} gotoDetail() {
35 this.router.navigate(['/detail', this.selectedHero.id]);
36 } add(name:string):void {
name = name.trim();
if (!name) {
return;
} this.heroService.create(name)
.then(hero=>{
this.heros.push(hero);
this.selectedHero=null;
});
} delete(hero:Hero):void
{
this.heroService.delete(hero.id)
.then(()=>{
this.heros=this.heros.filter(h=>h!==hero);
if(this.selectedHero===hero)
{
this.selectedHero=null;
}
})
} constructor(private router:Router, private titleService:Title, private heroService:HeroService) {
this.titleService.setTitle("HeroList");
} }重点就出现在我们通过构造函数注入的Router上，我们的英雄列表通过router.navigate(
['/detail', this.selectedHero.id]
)来导航到了详情页面，请注意，router是通过构造函数注入
- 详情页面组件代码
/**
* Created by guozhiqi on 2016/9/19.
*/
import {Component, Input, OnInit}from'@angular/core';
import {ActivatedRoute, Params, Router}from'@angular/router';
import {HeroService}from './hero.service';
import {Title}from '@angular/platform-browser';
import {Hero} from "./Hero";
import from = require("core-js/fn/array/from"); @Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
styleUrls: ['app/hero-detail.component.css'],
}) export class HeroDetailComponent implements OnInit {
hero:Hero;
currentDate:Date;
private router:Router; constructor(private heroService:HeroService,
private route:ActivatedRoute,
router:Router,
private title:Title) {
this.currentDate = new Date(); this.title.setTitle("hero-detail");
} ngOnInit():void {
this.route.params.forEach((params:Params)=> {
let id = +params['id'];
this.heroService.getHero(id).then(hero=>this.hero = hero);
});
} goBack():void {
39 window.history.back();
40 // this.router.navigate(['/heros']);
41
42 } save():void {
this.heroService.update(this.hero).then(this.goBack);
}
}重点是详情页面的goBack()方法，我本来准备通过路由的navigate方法 来实现导航，并且router是通过构造函数注入，但是我在使用时this.router会为null，导致我无法通过这种方式实现页面跳转。
其实我想说的这个倒不是ng2的bug，可能有些地方没有设置成功，之所以说是bug，而是因为官方没有提供具体的详细信息。
有知晓的麻烦回复一下，我相信如果要使用页面跳转，肯定会用到。
更详细的内容可以参考官方的英雄列表。
应该是Angular2的一个bug？的更多相关文章
- Tomcat一个BUG造成CLOSE_WAIT
之前应该提过,我们线上架构整体重新架设了,应用层面使用的是Spring Boot,前段日子因为一些第三方的原因,略有些匆忙的提前开始线上的内测了.然后运维发现了个问题,服务器的HTTPS端口有大量的C ...
- MySQL关于exists的一个bug
今天碰到一个很奇怪的问题,关于exists的, 第一个语句如下: SELECT ) FROM APPLY t WHERE EXISTS ( SELECT r.APPLY_ID FROM RECORD ...
- 由一个bug引发的SQLite缓存一致性探索
问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...
- Win10系统菜单打不开问题的解决，难道是Win10的一个Bug ?
Win10左下角菜单打不开,好痛苦,点击右下角的时间也没反应,各种不爽,折磨了我好几天,重装又不忍心,实在费劲,一堆开发环境要安装,上网找了很多方法都不适用.今天偶然解决了,仔细想了下,难道是Win1 ...
- 你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG
这篇文章并不在我的 underscore 源码解读计划中,直到 @pod4g 同学回复了我的 issue(详见 https://github.com/hanzichi/underscore-analy ...
- 标准模板库(STL)的一个 bug
今天敲代码的时候遇到 STL 的一个 bug,与 C++ 的类中的 const 成员变量有关.什么,明明提供了默认的构造函数和复制构造函数,竟然还要类提供赋值运算符重载.怎么会这样? 测试代码 Tes ...
- 是uibutton跟tableviewcell同步使用一个bug
这个问题是uibutton跟tableviewcell同步使用一个bug,不关delay一点毛事,证据就是点击事件没问题,so,搜到一个方法解决了这个问题.uibutton分类symbian2+ios ...
- 在chrome下-webkit-box布局的一个bug
chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-we ...
- 关于MySQL count(distinct) 逻辑的一个bug【转】
本文来自:http://dinglin.iteye.com/blog/1976026#comments 背景 客户报告了一个count(distinct)语句返回结果错误,实际结果存在值,但是用cou ...
随机推荐
- 故障重现(内存篇2)，JAVA内存不足导致频繁回收和swap引起的性能问题
背景起因: 记起以前的另一次也是关于内存的调优分享下 有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...
- nodejs创建http服务器
之前有简单介绍nodejs的一篇文章(http://www.cnblogs.com/fangsmile/p/6226044.html) HTTP服务器 Node内建有一个模块,利用它可以很容易创建基本 ...
- [C#] C# 知识回顾 - 学会处理异常
学会处理异常 你可以使用 try 块来对你觉得可能会出现异常的代码进行分区. 其中,与之关联的 catch 块可用于处理任何异常情况. 一个包含代码的 finally 块,无论 try 块中是否在运行 ...
- Windows API 设置窗口下控件Enable属性
参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...
- cesium自定义气泡窗口infoWindow
一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...
- Web安全开发之验证码设计不当引发的撞库问题
感谢某电商平台安全工程师feiyu跟我一起讨论这个漏洞的修复.以往在安全测试的过程中后台经常存在验证码不失效果造成的撞库问题,甚至在一些银行或者电商的登录与查存页面同样存在这个问题,一旦造成撞库无论对 ...
- IIS启动失败，启动Windows Process Activation Service时，出现错误13：数据无效 ;HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页
因为修改过管理员账号的密码后重启服务器导致IIS无法启动,出现已下异常 1.解决:"启动Windows Process Activation Service时,出现错误13:数据无效&quo ...
- (转载) Linux IO模式及 select、poll、epoll详解
注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出. 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案 ...
- linux下使用shell 自动执行脚本文件
以下实例本人在Centos6.5 64位操作系统中使用 一.定时复制文件 a.在/usr/local/wfjb_web_back目录下创建 tomcatBack.sh文件 文件内容: #将tomcat ...
- 【python之路5】学习小结
一.编程语言 java C语言 C++ C# Python 二.python语言的种类 Cpython:python的官方版本,使用最为广泛,实现将python(py文件)转换为字节码文件(pyc文件 ...