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

Posted

技术标签:

【中文标题】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 文件中使用它

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

【讨论】:

【参考方案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 的问题。

以上是关于Angular - 将目标添加到路由器导航的主要内容,如果未能解决你的问题,请参考以下文章

滚动经过片段时,Angular 10会获得路由器活动片段吗?

Angular6路由器导航到共享相同组件的多个子路由

无法直接导航到 URL Angular UI 路由器

Angular 路由器:根据用户的角色导航到不同的路由

Angular rc3 路由器 - 使用不同参数导航到同一页面

个人技术博客——Angular路由