时间戳

首页 > 解决方案 > 无法在 Angular 8 中为 window.open(url) 更改 url（路由）；

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

问题描述

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

单击此处下载我的计划 (PDF)

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

单击此处下载我的计划 (PDF) 实验室查看器作品！

我期待它显示：

实验室查看器工作！

但它仍然显示，但网址是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 { }

这是我的实验室-view.component.html：

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

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

单击此处下载我的计划 (PDF) 实验室查看器作品！

我希望在单击链接后仅显示：lab-viewer 有效！

标签： angulartypescript

解决方案

您不能为此使用窗口，您必须使用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']);
  }

推荐阅读