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

【问题标题】：Angular - Add target to router navigateAngular - 将目标添加到路由器导航
【发布时间】：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>

【问题讨论】：

标签： angular angular4-router

【解决方案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 的问题。

&lt;a class="btn btn-primary" target="_blank" routerLink="/create-playlist" &gt; Create Playlist &lt;/a&gt;

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