应该是Angular2的一个bug?

时间:2022-04-15 22:32:14

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

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

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

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

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

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

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

  1. 步骤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. 步骤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

  3. 在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模块

  4. 添加路由配置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);
  5. 添加英雄列表页面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是通过构造函数注入

  6. 详情页面组件代码
     /**
    * 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,而是因为官方没有提供具体的详细信息。

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

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