如何使用<li>查询在新选项卡中打开 '' 元素 在 Angular 中激活的路由中的参数

Question

我有一个元素列表说

<li [class.active_view]="Display('A')" (click)="Az()">A</li>
<li [class.active_view]="Display('B')" (click)="Bz()">B</li>
<li [class.active_view]="Display('C')" (click)="Cz()">C</li>

目前，每当用户单击我使用的任何选项卡时

this.activatedroute.queryParams.subscribe(query => { 
//some_code_to_set_url
});

然后我使用此 URL 导航到该网址。 但是使用<li>我无法在右键单击时启用Open in New Tab选项。有没有办法使用<li>标签来实现它。(我尝试使用href但它破坏了 url 并将许多符号(如?替换为%3F等(。如何在新选项卡中打开它并在右键单击时启用它。

Answer 1

该选项仅在使用<a>标签时可用。这就是他们在那里的原因。此外，这在语义上是不正确的。例如，屏幕阅读器和其他仅通过代码的软件将无法作为链接访问它们。

此外，要使它们在新选项卡中打开，请执行以下任一操作：

• 将它们更改为<a>并给出target="_blank".
• 使用window.open()函数打开 URL。

在 Angular JS 中，可以使用$window服务调用window.open：

.controller('exampleCtrl', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToGoogle = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);

参考：在 AngularJS 中单击按钮时打开一个新选项卡

Answer 2

我认为你总是可以使用解决方法(我不检查代码，但我的想法是( 在您的组件中

<li [class.active_view]="Display('A')" (click)="Az(newpage)">A</li>
<form #newpage [action]="url" target="_blank">

您的函数 Az

Az(form:any)
{
this.url="google";
form.submit();
}