routerLink以角度显示在新窗口中显示html页面

Question

我当前的应用程序如下所示。如果单击“预测”，则希望该应用程序打开新的html页面并打印其内容。

但是当我单击“预测”时，URL会更新为

  

http://localhost:4200/predict

和

中的内容

  

predict.html

被添加到屏幕1。

当我单击“预测”时，我只希望显示来自predict.html文件的内容。

这是我的app.component.html文件，其中包含用于预测的routerLink

 <div style="padding-top:30px;padding-left:350px;">                                
 <a routerLink = "predict" >Predict</a>                               
</div>                              
 <router-outlet></router-outlet>

我已在我的app.module.ts文件中添加了以下内容

import { RouterModule} from '@angular/router';
imports: [
    RouterModule.forRoot([
      {
         path: 'predict',
         component: PredictionComponent
      }
   ])
  ],

Answer 1

在这里，您只需在target="_blank"标签中添加anchor，然后检查

如果这行不通，那么您只需添加click handler并在goToPredictPage上绑定诸如anchor之类的任何方法，而不使用routerLink

<div style="padding-top:30px;padding-left:350px;">                                
 <a (click)="goToPredictPage()" >Predict</a>                               
</div>                              
 <router-outlet></router-outlet>

在ts文件中添加手动路由，这将在新标签页中打开路由页面

goToPredictPage(){
    this.router.navigate([]).then(result => { window.open(`/predict`, '_blank'); });
}

这里this.router是Router的实例

因此将其添加到ts文件的构造函数中

constructor(public router: Router) { }