Angular - 将目标添加到路由器导航

Posted 2023-02-27

【中文标题】Angular - 将目标添加到路由器导航

【英文标题】：Angular - Add target to router navigate

【发布时间】：2019-05-03 22:41:51

【问题描述】：

我想要做的是在另一个选项卡或弹出窗口中打开路由器导航的目标。 我的指示是这样的：

private router: Router;
this.router.navigate(['/page', id]);

在路由中我有：

 const routes: Routes = [

    path: '',
    component: LayoutComponent,
    children: [
         path: 'page', loadChildren: './page/page.module#PageModule' 
    ]

];

我想在另一个选项卡或弹出窗口中打开此链接。 我能做什么？

---

这是page.ts的代码

@Component(
 selector: 'app-etichetta',
 templateUrl: './page.component.html',
 styleUrls: ['./page.component.scss'],
 animations: [routerTransition()]
)
export class PageComponent implements OnInit 


 constructor(private router: Router,
    private route: ActivatedRoute,
    public appService: AppService) 
 


 ngOnInit() 

 

这是html：

<div [@routerTransition]>
  <br>
  <div class="row">

  </div>
</div>

【参考方案1】：

Angular 不支持导航到新标签页，你可以使用 window.open 来做到这一点

window.open(url, '_blank');

【讨论】：

谢谢，但我试过了，链接在新选项卡上正确打开（本地主机/页面），但 1 秒后它重定向到本地主机

你的ts里面应该有重定向逻辑，检查一下

@Martina 我在重定向时遇到了同样的问题。原来我的路线有点错误。

【参考方案2】：

要手动重定向，您应该首先使用createUrlTree 方法创建一个重定向的URL，然后重定向。

const url = this.router.createUrlTree(['/page', id])
window.open(url.toString(), '_blank')

---

声明式导航应该可以工作。

<a target="_blank" [routerLink]="['/page', id]">
  Link
</a>

【讨论】：

谢谢，但我没有 a 元素，我必须在 .ts 中执行此操作

【参考方案3】：

在 Angular 组件 html 文件中使用它

<a class="btn btn-primary" target="_blank" routerLink="/create-playlist" > Create Playlist </a>

【参考方案4】：

路由器没有在新标签页中打开链接的选项。也就是说，有一种解决方法——您可以在模板中使用隐藏链接的target="_blank"，引用它并单击它：

<a #link
  style="visibility: hidden; display: none;" 
  [routerLink]="['/page', id]"
  target="_blank"
  queryParamsHandling="merge"
></a>

@ViewChild('link',  static: false ) private link: ElementRef;

this.link.nativeElement.click();

【参考方案5】：

import  Location  from '@angular/common';
import  Router  from '@angular/router';

export class YourComponent 

   constructor(private router: Router)

   openNewTab ()
           const host: string =  location.origin;
           const url: string = host + '/#/' + String(this.router.createUrlTree(['/main/product'],  queryParams:  key: encryptData  ));
           window.open(url, '_blank');

   

【讨论】：

您正在回答一个超过 2 年的问题，因此请edit 您的答案以现有答案所没有的方式解释您的代码答案如何成为 OP 的问题。