无法在 Angular 8 中为 window.open(url) 更改 url（路由）；答案

【问题标题】：Unable to change url (Routing) in Angular 8 for window.open(url);无法在 Angular 8 中为 window.open(url) 更改 url（路由）；
【发布时间】：2020-02-03 19:00:37
【问题描述】：

我是 Angular 8 的新手。在我的 localhost:4200 我有一个链接：

点击这里下载我的计划 (PDF)

我点击链接，我的网址是http://localhost:4200/#/LabViewerPDF，但它仍然显示：

点击这里下载我的计划 (PDF) 实验室查看器有效！

我期待它显示：

实验室查看器有效！

但它仍然显示，但 url 是 http://localhost:4200/#/LabViewerPDF：单击此处下载我的计划 (PDF) 实验室查看器有效！

这是我的 app.component.html

<a (click)="selectLab()">Click here to download my Plan (PDF)</a>
<router-outlet></router-outlet>

这是我的 app.component.ts 代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'test1';

  selectLab() {
    let url = `/#/LabViewerPDF`;
    window.open(url);
  }
}

这是我的 app-routing.module.ts：

            import { NgModule } from '@angular/core';
            import { Routes, RouterModule } from '@angular/router';
            import { LabViewerComponent } from './lab-viewer/lab-viewer.component';


            const routes: Routes = [
              { path: 'LabViewerPDF', component: LabViewerComponent}
            ];

            @NgModule({
              imports: [RouterModule.forRoot(routes, {useHash: true})],
              exports: [RouterModule]
            })
            export class AppRoutingModule { }

这是我的 lab-view.component.html：

<p>lab-viewer works!</p>

为什么我点击链接后显示原来的值和新的值：

点击这里下载我的计划 (PDF) 实验室查看器有效！

我希望点击链接后只显示：实验室查看器有效！

【问题讨论】：

请分享您的路由配置，如果您没有明确设置，默认情况下 Angular 的路由策略不是基于哈希的。

标签： angular typescript

【解决方案1】：

你不能使用这个窗口，你必须使用router。试试

<a routerLink="/LabViewerPDF">Click here to download my Plan (PDF)</a>

或

  import { Router } from '@angular/router';
.......
  constructor(private router: Router) {}

  selectLab() {
   this.router.navigate(['/LabViewerPDF']);
  }

【讨论】：

对不起，我想导入 this.router 吗？能否请您提供“路由器”的导入代码？

【解决方案2】：

您在此处导航不正确：

selectLab() {
   let url = `/#/LabViewerPDF`;
   window.open(url);
}

这应该是你的 app.componenet.ts 的样子：

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'test1';

constructor(private router: Router) {}


   selectLab() {
       this.router.navigate(['/LabViewerPDF']);
   }

}

甚至更好：你的 app.component.html

<a  (click)="selectLab()" routerLink="/LabViewerPDF">Click here to download my Plan (PDF)</a>

<router-outlet></router-outlet>

如果您的目标是在不同的窗口中打开它，那么：

selectLab() {
    window.open(window.location.href + '/LabViewerPDF', "_blank");
}

提前说一下，如果你想下载 pdf 文件，请查看 html2canvas 和 jsPDF。

如果这是真的，我会节省您的时间，因为导入 html2canvas 会遇到很多问题。像这样导入它们：

   import * as jsPDF from 'jspdf';
   import html2canvas from 'html2canvas' //only works when imported like this

它会报错，但它会起作用。

好的规则是为你的路线使用这个（可选）

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LabViewerComponent } from './lab-viewer/lab-viewer.component';


const routes: Routes = [
   {
      path: '',
      component: AppComponent 
      children: [
         { 
            path: 'LabViewerPDF', 
            component: LabViewerComponent
         }
      ]
   }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

【讨论】：