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 文件中使用它
<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 的问题。以上是关于Angular - 将目标添加到路由器导航的主要内容,如果未能解决你的问题,请参考以下文章
滚动经过片段时,Angular 10会获得路由器活动片段吗?