Можно ли привязать [routerLink] к div? Угловой 2+
Я новичок в Angular, и я не нашел четких ответов на этот вопрос, что бы я ни искал.
В настоящее время это работает:
<div class = "col-sm" (click) = "brandListRoute()">
который указывает на эту функцию в моем компоненте:
brandListRoute() {
this.router.navigate(['explore/brands']);
}
Так что это работает отлично, однако, когда я впервые попробовал привязать [routerLink] следующим образом:
<div [routerLink] = "['explore/brands']"> </div>
Я могу щелкнуть по div, но ничего не происходит. Итак, мой вопрос: работает ли [routerLink] только с такими вещами, как anchor tags и buttons, или моя вышеупомянутая логика ошибочна?
Нужно найти лучшее решение моей проблемы. Большое спасибо заранее!
Ответы 1
Да, его можно привязать к тегу div, ваш маршрут, вероятно, неправильный, попробуйте добавить / перед маршрутом.
<div [routerLink] = "['/explore/brands']"> go to this location </div>
Спасибо. Это хорошо работает. Я просто хочу отметить, что, если вы не используете тег привязки, он не будет отображать URI при наведении курсора, а также не будут доступны параметры контекстного меню «Открыть в новой вкладке», «Копировать URL-адрес» и т. д.
Примечание: если вы планируете привязать 'состояние' для маршрута, <div> НЕ будет связывать данные, однако <a> будет - проверено в Angular 8.1 и 8.2.
@VikramDeshmukh Означает ли это, что если я хочу открыть новую вкладку, привязка routerLink к div не будет работать?
@Franva. Да, насколько мне известно. Однако с тех пор я отказался от Angular и, возможно, не знал о каком-либо новом способе достижения этой цели.
Вам следует избегать этого и предпочесть программный подход (щелчок) + навигация, поскольку он сделает ваш div «фокусируемым», а Chrome по умолчанию добавляет черный контур к элементам с фокусом.
Качественный товар! Это сработало в первый раз, большое вам спасибо.