Как открыть элементы `<li>` в новой вкладке с помощью параметров запроса в активированном маршруте в Angular
У меня есть список элементов, которые говорят
<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 и т. д.). Как открыть его в новой вкладке и включить его правой кнопкой мыши.
Ответы 2
Эта опция доступна только при использовании тегов <a>. Вот почему они существуют. Кроме того, это семантически неверно. Скажем, программы чтения с экрана и другое программное обеспечение, которое просто использует код, не смогут получить к ним доступ в виде ссылок.
Кроме того, чтобы они открывались в новых вкладках, выполните одно из следующих действий:
- Поменяйте их на
<a>и отдайтеtarget = "_blank". - Используйте функцию
window.open(), чтобы открыть URL.
В Angular JS window.open можно вызвать с помощью службы $window:
.controller('exampleCtrl', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToGoogle = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);
Ссылка: Откройте новую вкладку при нажатии кнопки в AngularJS
Спасибо за ответ, но я использую Angular, а не AngularJS.
@AakashSingh Подожди, немного сбит с толку. Просто скажите на Angular версию?
Это Angular 4, я знаю, что использование <a></a> сделает это возможным. Но я хочу спросить, есть ли возможность использовать Angular 4, то есть любой вариант маршрутизатора, который может мне в этом помочь. Также я попытался сделать это, используя <a routerLink='/search/A'> </a> и установив параметры маршрута на {path:'/search/:id,component:ResultComponent}.
Но я не смог этого сделать.
@AakashSingh Я прекрасно понимаю вашу ситуацию. К сожалению, даже в Angular JS это невозможно сделать без использования тегов <a>. :(
@PraveenKumar невозможное - ничто :)
Я думаю, вы всегда можете использовать обходной путь (я не проверяю код, но моя идея есть) в вашем компоненте
<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();
}
У меня не работает. Думаю, вы не поняли вопроса.
Вы не можете открыть новую вкладку, потому что это больше не ссылка - она запускает навигацию в фоновом режиме.