编程语言
首页 > 编程语言> > javascript – 从角度2升级到角度4.4时角度路由器问题

javascript – 从角度2升级到角度4.4时角度路由器问题

作者:互联网

我按照角度官方migrating_documentation中提到的相同步骤进行操作.

不幸的是,当我将代码从角度2迁移到角度4.4时,我遇到了一个问题.该问题可能与@ angular / router有关.

但是,代码似乎工作正常,但我无法进行构建.任何建议将不胜感激.

Error shown in Terminal:

ERROR in [at-loader] src/app/app.component.ts:60:16 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'

ERROR in [at-loader] src/app/app.component.ts:60:39 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

ERROR in [at-loader] src/app/app.component.ts:60:68 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

的package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^4.4.7",
    "@angular/common": "^4.4.7",
    "@angular/compiler": "^4.4.7",
    "@angular/compiler-cli": "^4.4.7",
    "@angular/core": "^4.4.7",
    "@angular/forms": "^4.4.7",
    "@angular/http": "^4.4.7",
    "@angular/platform-browser": "^4.4.7",
    "@angular/platform-browser-dynamic": "^4.4.7",
    "@angular/platform-server": "^4.4.7",
    "@angular/router": "^4.4.7",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "dragula": "^3.7.2",
    "fullcalendar": "^3.0.1",
    "highcharts": "^5.0.9",
    "jquery": "^3.1.1",
    "jquery-mousewheel": "^3.1.13",
    "jquery-ui": "^1.12.1",
    "moment": "^2.17.1",
    "ng2-dragula": "^1.3.0",
    "primeng": "^2.0.2",
    "rxjs": "5.0.1",
    "webpack-strip": "^0.1.0",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/google-maps": "^3.2.0",
    "@types/jasmine": "2.5.36",
    "@types/jquery": "^2.0.41",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.3.4",
    "url-loader": "^0.5.9",
    "webpack": "2.2.1",
    "webpack-bundle-size-analyzer": "^2.6.0",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

app.component.ts

import { Component,AfterContentInit,AfterViewInit,AfterViewChecked } from '@angular/core';
import { Location,PopStateEvent} from '@angular/common';
import * as myGlobals from './global_variable';
import { headerComponent } from './components/header/header.component';
import { footerComponent }   from './components/footer/footer.component';
import { sidebarComponent }   from './components/sidebar/sidebar.component';
import { mainPageComponent }   from './components/main/mainpage.component';
import { Routes, RouterModule ,ActivatedRoute,Router,NavigationEnd,NavigationStart , ExtraOptions} from '@angular/router';
import {AuthService} from './services/auth.service';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent { 
public hideHeader:any = false;
public showHeader:any;
public showSidebarTrial:any = false;
public param_id:any;
headerTrialEmitter(e:any)
{
    this.showSidebarTrial = e.value;
}
    onActivate(e){
       //alert(1.5);
    }
 
    onDeactivate(e)
    {
     // alert(1);
      if(myGlobals.getCookie(window.location.pathname) == ''){
            document.body.scrollTop = 0;
           
        }else{
           setTimeout(()=>{
         //    alert(2);
            document.documentElement.scrollTop = Number(myGlobals.getCookie(window.location.pathname));
             if(document.documentElement.scrollTop == 0){
               document.body.scrollTop = Number(myGlobals.getCookie(window.location.pathname));

             }
           },2500);
            
        }
       
    }

constructor(private route:ActivatedRoute,private cons:RouterModule,public Location:Location,private router: Router,private AuthService:AuthService){


 router.events.subscribe((val) => {
          var patt = new RegExp("/reset-password/");
          var found_rp = false;
          if(patt.test(window.location.pathname))
          {
             found_rp = true;
          }

        if(val.url == '/login' || val.url == '/please-help' || val.url == '/reset-password' || found_rp){
        	this.hideHeader = false;

        } else{

        	this.hideHeader = true;
        }
    });
 
  this.router.events
        .filter(e => e instanceof NavigationStart)
        .pairwise().subscribe((e:any) => {
            console.log(e,'pairwise');
        //    alert(window.location.pathname);
          //  alert(document.body.scrollTop);
            if(e[0].url == '/login'){

            }else if(e[0].url == e[1].url){

            }else{

              var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
              myGlobals.setCookie(e[0].url,scrollTop);
              var cookies = document.cookie.split(";");
              if(cookies.length > 2){
                for(var i = 0;i < cookies.length;i++){
                  myGlobals.deleteCookie('')
                }
              }
            }
        });

if(window.location.pathname == "/login" || window.location.pathname == "/please-help"){

    this.hideHeader = false;
//    console.log("hideHeader1 true");

}else{

this.hideHeader = true;

}
}

}

解决方法:

经过长时间的谷歌搜索,我能够找到问题的解决方案.上面提到的答案对于角度4是正确的,但是,在Angular 6中你需要使用下面提到的代码

Angular 6

导入下面提到的模块

import { filter,pairwise} from 'rxjs/operators'

并使用管道

this.router.events.pipe(
   filter((val:Event) => val instanceof NavigationStart)).subscribe((val:any) => {
      console.log(val,'check val function' , typeof val , val.url);
      var patt     = new RegExp("/reset-password/");
      var found_rp = false;
      if(patt.test(window.location.pathname))
      {
         found_rp = true;
      }

      if(val.url == '/login' || val.url == '/please-help' || val.url == '/reset-password' || found_rp){
        this.hideHeader = false;
      } else{
        this.hideHeader = true;
      }

});

标签:angular4-router,javascript,angular,typescript,angular2-routing
来源: https://codeday.me/bug/20190828/1746575.html