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

Question

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

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>

Answer 1

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

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

---

声明式导航也可以。

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

Answer 2

在有角度的html文件中使用

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

Answer 3

路由器没有在新标签页中打开链接的选项。也就是说，有一个解决方法 - 您可以使用模板中隐藏链接的 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();

Answer 4

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

window.open(url, '_blank');

Answer 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');

   }
}