带有routerLink和fragment的<a>不会在元素上设置焦点
。routerLink是Angular框架中用于导航的指令，用于在单页应用中切换不同的路由。而fragment是URL中的片段标识符，用于在页面内部定位到特定的元素。
在HTML中，<a>标签是用于创建超链接的元素。当点击带有routerLink和fragment的<a>标签时，会触发路由导航，并且页面会滚动到指定的元素位置，但不会在元素上设置焦点。
设置焦点通常是通过JavaScript来实现的，可以使用Element.focus()方法将焦点设置到指定的元素上。但是带有routerLink和fragment的<a>标签并不会自动设置焦点，因为它们的主要目的是导航和定位，而不是设置焦点。
总结起来，带有routerLink和fragment的<a>标签在点击时会触发路由导航和页面滚动，但不会在元素上设置焦点。如果需要设置焦点，可以通过JavaScript来实现。
相关·内容
1回答
角- routerLink聚焦
、、、、
我很难专注于routerLink。
第一行以理论为重点展示了完美的URL，但没有关注任何内容。第二行的焦点很好，但重新加载完整的页面。我能做些什么来使用routerLink并专注于特定的输入？
产地: Component1
<a [routerLink]="'first'" fragment="name"> first </a>
<a href="{{ '/first#name' }}"> first </a>
目标: component2
<input
#
浏览 8提问于2022-06-23得票数 0
回答已采纳
角2 在模板中展示了带有方括号和不带方括号的routerLink示例：
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page:
浏览 1提问于2016-08-23得票数 35
回答已采纳
2回答
Angular flex布局挑战
、、、、
我有一个使用angular flex和angular flex-layout的Angular应用程序(v6.1)。我正在使用angular v6.1来利用片段滚动特性。我的页面有一个工具栏，带有指向页面内片段的链接的侧边导航和一个中心内容(见下图)。我的要求是让工具栏和左侧导航固定，而中间的内容应该单独滚动。下面是我的app.component.html。有了这个html，整个页面都会滚动，而不仅仅是中心内容。我如何才能达到期望的行为？ app.component.html <div fxLayout="column">
<div fxFlex=
浏览 16提问于2019-01-05得票数 1
回答已采纳
我使用的是angular 9.0.6。我在满足WCAG标准的页面导航方面遇到了麻烦。 我的app-component看起来像这样： <nav class="pageNav">
<ul>
<li><a [routerLink]="" fragment="main-nav">Navigation</a></li>
<li><a [routerLink]="" fragment="main-section"&g
浏览 12提问于2020-04-08得票数 0
我有一个粘稠的标头组件，它有一个导航条。
<header id="header" class="header" id='header' #header>
<div class="header__nav">
<ul>
<li>
<a routerLink='/' fragment = 'producer'> producer </a>
浏览 15提问于2022-01-22得票数 1
回答已采纳
我使用的是包含3个片段(A、B和C)的ViewPager2。Fragment A和C包含EditText。当选择片段C中的EditText时，ViewPager切换回片段A，并将焦点放在片段A中的EditText上(键盘打开)。有人能解释这种行为吗？
浏览 34提问于2019-06-07得票数 4
回答已采纳
我有两个组件，登录和注册每个输入字段，我已经包括了自动焦点属性。但是，当我将注册表组件的路由更改为Login组件时，自动焦点就不能工作了。我知道这是因为页面没有重新加载。但有没有办法这样做呢？
，这是我的Login.vue，和Register.vue一样
<form>
<input type="text" autofocus />
<RouterLink to="/login">Login now!</RouterLink>
</form>
浏览 6提问于2022-06-22得票数 0
回答已采纳
2回答
因此，我在我的项目中有这个header.component.ts，并有指向主页所有部分的链接。
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a [routerLink]="['/']" [routerLinkActive]="'active'">Home</a></li>
浏览 0提问于2021-01-08得票数 3
回答已采纳
可以在Vaadin 14和RouterLink中添加URI的#fragment部分吗？
我在Vaadin的文件里什么都找不到。
我需要这个可以从另一个视图快速访问视图的特定部分。
浏览 1提问于2020-04-19得票数 2
回答已采纳
1回答
我非常确定我的应用程序中的路由设置是正确的，因为当我输入正确的路径时，它会将我带到正确的位置并显示正确的信息。我遇到问题的地方是路由器链路。我想这跟HTML有关系吧？当我点击每个链接时，没有任何反应。无论如何，我会发布HTML，看看是否有人能指出我可能做错了什么。我还在这里获得了github存储库链接：https://github.com/jadenadams329/JIT1 <div class="app-bar-navbar vertical-appbar">
<nav class="navbar navbar-expand-lg
浏览 13提问于2019-10-03得票数 0
2回答
我想在d3.tree()中显示一个routerLink，但我很难将它显示为超链接。
我试过这样做
.append("a")
.html(`<a [routerLink]="['/mycomponent']" fragment="1.1">link to user component</a>`);
考虑到这
.append("a")
.html(`<a href="mycomponent#1.1">link to user component</a>`)
浏览 15提问于2022-02-22得票数 1
我试图在页面中重定向，使用锚标记中的片段。它第一次工作很好，但是当我手动向上滚动页面并再次按下锚链接时，它就不工作了。
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="home">Home</a>
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="about">About</
浏览 4提问于2020-04-26得票数 3
回答已采纳
1回答
我对角2很陌生，我读过链接，其中提到了不同的路径链接编写方法。
1. <a [routerLink]="[ '/path', routeParam ]">
2. <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
3. <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
4. <a [routerLi
浏览 3提问于2016-10-31得票数 0
回答已采纳
1回答
在一个有角度的应用程序中，我有两个引导列--左上角包含一个带有overflow-y: auto;的可滚动div --右旋是一组链接，本质上是一组书签，它们跳到左侧可滚动容器中的各个部分。
据我所知，我面临着两个挑战：
1 -当启用路由时，设置角以识别我希望滚动到页面部分。
这是我通过使用路由器选项和片段来解决的
const routerOptions: ExtraOptions = {
useHash: false,
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled'
浏览 0提问于2021-05-02得票数 0
回答已采纳
这是我用来操作选项卡函数的代码。
<div id="tabs">
<ul class="ulclass">
<li><a href="#fragment-1" class="button button1"><span>AFFILIATE INFORMATION</span></a></li>
<li><a href="#fragment-2&
浏览 1提问于2014-09-17得票数 0
回答已采纳
，routerLink指令选择器定义为：
:not(a)[routerLink]
据我所知，这意味着“所有具有属性<a> routerLink".的非标记”。
但是，在后面的文档中，它们显示了routerLink与<a>标记一起使用的示例，例如：
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
link to user component
</a>
这是
浏览 0提问于2017-11-09得票数 3
回答已采纳
当使用routerLink和routerLinkActive将CSS应用到导航栏时，我还想包含fragment信息，以便在主页中的部分中链接是唯一的。
我试过使用[routerLinkActiveOptions]="{ exact: true }"来解决任何运气问题。
导航条形码的相关部分是：
<li routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/sitio" f
浏览 1提问于2016-12-30得票数 15
回答已采纳
我有一个名为pgr的组件，在这里，我试图利用锚片段跳过它的父组件的html，名为power-轨距-report(两者都包含在power-轨距-Report.Module中)：
<accordion [closeOthers]="true">
<accordion-group routerLink="." fragment="financials" #financials...>
<accordion-group routerLink="." fragment="earnings"
浏览 2提问于2017-06-01得票数 2
回答已采纳
1回答
我有一个带有侧边菜单的页面，每个侧边菜单项都有一个发送不同片段的routerLink。我想知道这条带有片段的新路由是否可能有一个子路由。 示例： 侧边菜单： <button type="button" routerLink="['/pageA']" fragment="frag">btn side menu</button> 单击此按钮，路由将如下所示：http://localhost:4200/#/pageA#frag 内容页 <button type="button" route
浏览 16提问于2021-01-20得票数 0
回答已采纳
2回答
我已经在routingModule和所有路径中启用了anchorScrolling，但当我单击链接时，什么也没有发生。
‘’nav bar.Component.html‘
<div id="mySidenav" class="sidenav" #sidenav>
<a href="javascript:void(0)" class="closeBtn"
(click)="closeNav()">×</a>
<a routerLink=
浏览 0提问于2018-12-20得票数 9
我对集合式视图的画外音有点问题。我有一个包含5个单元格的全屏(减去导航栏) UICollectionView。每个单元格都包含一个带有isAccessibilityElement=true的视图。
当VoiceOver被激活时，导航栏中的标题被聚焦。然后，如果我通过向左/向右滑动来移动焦点，每个单元格项都被聚焦，一个接一个，正如人们所预期的那样。问题是，如果我通过在屏幕上向下拖动手指来移动焦点。然后，当手指位于任何单元格的外部时，屏幕的背景(即集合视图的区域)接收焦点。
有没有办法把它关掉？
我试过了：
class MyViewController: UICollectionViewContr
浏览 0提问于2017-09-01得票数 6
2回答
我有一个小菜单，可以帮助用户通过滚动到以下选项在同一页面中导航：
<div class="listContainer">
<div class="row">
<div class="list-group" id="list-tab" routerLinkActive="active-link">
<ul>
<li><a routerLink="./" [fragment]=&
浏览 46提问于2019-03-26得票数 0
3回答
我想做的是创建一个锚链接。此链接将导航到我的页面中的特定滚动点。我有角形版本5。
Html：
<mat-list>
<mat-list-item><a [routerLink]="['/']"> Intro </a></mat-list-item>
<mat-list-item><a [routerLink]="['/']" fragment="mobile"> Mobile </a></mat
浏览 3提问于2018-02-22得票数 1
回答已采纳
在我的EditText中的OnCreateView上，我将一个焦点侦听器附加到一个Fragment上。如果EditText获得焦点，则通知侦听器。到目前为止还不错，但是当焦点恢复到新的Fragment时，侦听器会在屏幕旋转后再次收到通知。有什么好的做法来区分由于配置更改而引起的侦听器通知和真正的人工交互吗？还是为了防止侦听器在由于配置更改而发生焦点更改后收到通知？
浏览 1提问于2020-03-23得票数 5
回答已采纳
4回答
我有一个链接，通过点击链接，我想滚动到一个片段，在页面的底部。当我点击链接时，片段是工作的，但它并没有将它带到页面的顶部。
我尝试使用带有id的the div和节来创建片段。但是，它并没有将div或部分带到页面的顶部。
我的应用程序路由模块中的代码是：
imports: [
RouterModule.forRoot(routes, {
//useHash: true,
scrollPositionRestoration: 'enabled',
onSameUrlNavigation: 'reload',
anchorSc
浏览 0提问于2019-09-16得票数 6
回答已采纳
在我们的iOS应用程序中，我们有一个带有UINavigationController的屏幕，rightBarButtonItems中有三个UIBarButtonItem，还有一个带有UITableView子视图的UIView内容视图。
每次应用程序到达前台时，VoiceOver都会将初始焦点放在最左边的UIBarButtonItem上。我们希望将焦点放在UITableView中最上面的单元格(初始启动)，或者在应用程序转到后台之前用户主动选择的单元格。
我们试图调用UIAccessibilityPostNotification()，但这只在我们添加延迟的情况下才起作用，这似乎非常脆弱，并且会让
浏览 0提问于2015-11-26得票数 2
4回答
是否有方法将焦点设置在页面加载上？我已经发现说明使用autofocus属性的文档，但是文档说该属性只适用于input、button、textarea和select。
谢谢。
浏览 10提问于2022-06-17得票数 1
这不是一个真正的问题，只是试图更好地理解行为。
我有一个mat-table，我一直在处理click事件以突出显示行，现在我切换到让它与router一起工作。
当我将routerLinkActive添加到mat-row中，然后单击该行时，就会突出显示。事实证明，这是由于设置了:focus，因为某些原因导致了蓝色的轮廓。
<mat-row
matRipple
routerLink="doesnt/exist"
routerLinkActive="class-doesnt-even-exist"
浏览 0提问于2018-02-09得票数 1
回答已采纳
我正在使用ng-bootstrap为我的角4应用程序添加一些指令。现在，我正在尝试实现一个带有链接的侧栏，这些链接是动态填充的。我有一组父链接，它将在单击并显示一组其他链接(页面中的片段)时展开。这就是我所拥有的，基于页面上的示例：
模板：
<ul *ngFor="let category of categories" class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="./"
浏览 8提问于2017-05-22得票数 0
回答已采纳
1回答
我有一个带有多个线性布局和一个编辑文本框的片段。但是，键盘始终保持打开状态。我已经尝试将fragment主布局设置为clickable和focusableInTouchMode，但它只适用于显示主布局的视图部分。视图中任何其他被触摸的部分仍然不会隐藏键盘。有人知道我如何在布局的所有部分都不添加焦点侦听器的情况下克服这个问题吗？
浏览 4提问于2019-01-27得票数 0
2回答
我有一个问题，我想改变第一个DIV的CSS (背景，宽度，高度.)基于我所使用的RouterModule和这个DIV位于主app.component.html中
<div class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-1 col-md-1 col-sm-1" id="logo">
<a routerLink=""&
浏览 0提问于2018-10-20得票数 0
回答已采纳
我已经建立了一个角形9应用程序，并添加了@ngx-翻译本地化。我已经配置了我的应用程序，以便它接受lang查询参数并相应地更改区域设置。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
constructor(private route: Acti
浏览 8提问于2020-05-24得票数 3
回答已采纳
2回答
我需要有跳过导航面板在角度的链接，移动到内容部分工作良好，但标签顺序没有遵循。问题是，当用户激活跳到主内容链接时，页面将移动到“主”锚点，但如果用户继续使用选项卡使用键盘导航，下一项仍然是导航栏中的下一个链接，所以这并不能解决问题。当页面移动到主内容并且用户按tab键时，如何才能使Tab键顺序从主内容继续？ 目前我有<a [routerLink]="" (click)="skipToMain('main')" > Move to main </a> 和ts文件中 skipToMain(id) {
this.route
浏览 11提问于2021-07-13得票数 0
回答已采纳
在我的Angular 2应用程序中，我试图禁用一个routerLink，但没有成功。我已尝试处理click事件(带有event.preventDefault()和event.stopPropagation())，但它不工作。 如何禁用routerLink？
浏览 157提问于2016-02-16得票数 79
回答已采纳
我正面临着一个问题，虽然它可能有一个简单的解决方案，但无法找到它。
我有一个带有几个按钮的页面(比如mainPage)，在这个页面上，我通过在xaml中将按钮的IsDefault=设置为“true”来启用一个按钮(比如Submit)的"Enter“键，它工作得很好。
点击我的mainPage上的其他按钮将打开一个弹出窗口，其中包含两个按钮“是”和“否”。当我按enter键时，将IsDefault="true“属性设置为"Yes”将不起作用。(对于信息，它对提交按钮也不起作用，这也不是问题，我想我也有一个 )
如何为弹出窗口中的按钮启用此功能？
(对于更多的信息，我们有一
浏览 4提问于2013-01-16得票数 4
回答已采纳
2回答
我想从组件中以编程方式更改url的片段，但是我没有做到。
<a #linkComponent routerLink='home' fragment='part'>link</a>
@ViewChild('linkComponent') linkComponent;
this.linkComponent.????
或者可能有一种不同的方式，也许使用
浏览 5提问于2016-12-01得票数 4
回答已采纳
1回答
是否有可能对反应碎片进行调整？
、、、、
我有一个react片段，它在用户单击button.The加载程序时显示加载程序，直到响应comes.Everything运行良好为止，除了带有加载器的片段应该对齐到现在的片段代码显示加载器(使用从频谱中等待)。
<Fragment >
<Wait size="M" />
Please wait....
</Fragment>
我怎么才能把碎片移到右边一段距离呢？我不能使用div，因为它扰乱了布局，我可以通过使用align属性来对齐等待中心，但是它不支持任何文本。
浏览 5提问于2022-03-17得票数 0
我正在做一个项目，使用带有NGX-引导标签的角形6。
我想要完成的任务:从不同的页面路由到我的选项卡页，但是转到特定的选项卡。到目前为止，我能够使用选项卡导航到页面，并在URL (/tabsPage#tab2)中显示正确的路径，但它仍然位于第一个选项卡上，而不是第二个选项卡上。
app.component.ts
@ViewChild('staticTabs') staticTabs: TabsetComponent;
this.route.fragment.subscribe((fragment: string) => {
if(fragment){
let
浏览 0提问于2018-11-02得票数 1
我有UserControl，它是用ElementHost做的。
它包含DataGrid
当用户按enter或双击时，将显示行新窗口(modalless)，当关闭该窗口时，将激活带有ElementHost的窗口。问题是DataGrid失去了焦点。
Snoop向我展示了可视化树具有以下结构：
AdornerDecorator -> AvalonAdapter -> My UserControl。
Snoop显示，在激活之后，AdornerDecorator具有属性
IsFocusable = false
IsFocused = false
IsKeyboardFocused = tru
浏览 0提问于2013-01-23得票数 4
回答已采纳
更新2021年3月
Angular团队最终合并了PR，你可以在上查看更多细节。
要使用它，简单地说
<div routerLinkActive="active-link" [routerLinkActiveOptions]="options">
</div>
其中options将具有IsActiveMatchOptions的形状
export declare interface IsActiveMatchOptions {
fragment: 'exact' | 'ignored';
mat
浏览 3提问于2017-08-02得票数 9
1回答
为什么引导模式接收集中在标签上？
、、、、
的tabIndex值为-1，但可以将其放入并聚焦于：
<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1" style="display: block; padding-right: 0px;">
这里的例子：
该模式将有一个大的蓝色盒子周围，当焦点。
在我的项目中，我有一个带有两个按钮的模态窗口。我需要能够在按钮之间来回切换(不使用shift选项卡)。当我第三次点击选项卡时，它会聚焦在模式上，留下没有焦点的
浏览 3提问于2020-10-13得票数 0
回答已采纳
2回答
在配置更改时，在activity和fragment中保存数据的正确方法是什么？我有带有NavigationDrawer的activity，我想保存ListView中项目的当前选定位置，但也要保存fragment中的数据。我尝试将对象保存在activity的onSaveInstanceState中，但在这种情况下，我无法将数据保存在fragment中(在fragment类中使用onSaveInstanceState )。在配置更改时，将数据保存在activity及其fragment中的正确方法是什么？
浏览 2提问于2013-11-04得票数 2
1回答
我想做的是在我的主页上有一个链接，链接到另一页上的某个部分。所以，我尝试的是routerLink到页面，然后是一个特定的id，但是它不起作用，我不知道你是否会这样做.
homepage.component.html
<img [routerLink]="['our-products/#element']" data-src="../../assets/img/product-logos/product-logo.svg" alt="Product Logo">
显然在我的产品页面上
<div class=&#
浏览 0提问于2018-02-04得票数 0
我正在尝试将JS对象绑定到html模板，以显示一些导航链接，但无济于事。如果我在html中硬编码相同的信息，链接就会起作用。 component.ts navigation = [
{ link: '/home', label: 'Home', fragment: null },
{ link: '/home', label: 'Get Your Number!', fragment: 'get-your-number' },
{ link: '/home', labe
浏览 18提问于2019-12-18得票数 0
我在我的应用程序中遇到了以下关于焦点的问题。我想让应用程序适应wcag的焦点需求，但我对一些元素有问题-例如过滤器-它们不能接收按钮周围的边框。 如果焦点在我的过滤器-元素接收ui-状态-焦点类上，我将border: 1px dotted red !important;添加到这个类中-现在边框在键盘选项卡按钮导航中可见，但不幸的是，当我用鼠标单击以过滤标签时，红色边框也是可见的-我不想在鼠标单击后看到这个边框。 你知道如何在我点击过滤器后从元素中隐藏类ui状态焦点，以避免展开的过滤器出现红色边框吗？ 我使用primefaces/jsf和类ui-state-焦点是自动添加的，但是如何仅在键盘导
浏览 21提问于2021-03-26得票数 1
我正在创建一个带有输入网格的web表单，用于在Django中创建对象。
当焦点放在下拉菜单上时，向上和左箭头选择前一项，右/向下箭头选择下一项。
我想使用左右箭头将焦点左右移动到网格上(有点像excel那样)。我可以禁用左右箭头更改菜单选项(同时保留向上/向下箭头的功能)吗？
浏览 9提问于2014-03-11得票数 2
回答已采纳
我在一个模式中有一个按钮，点击打开一个popover组件，在popover中我有一个输入文本字段。
我的问题是输入立刻失去了焦点，我不能输入它，因为其他东西正在从它中劫持焦点，而我不知道是什么，是这个问题的一个工作示例。
下面是有问题的代码：
import "./styles.css";
import { Fragment, useState } from "react";
import { Button, Modal, OverlayTrigger, Popover, Form } from "react-bootstrap";
expor
浏览 12提问于2022-04-18得票数 0
回答已采纳
2回答
是否有可能在刷新后重新调整输入字段的焦点，这是在请求页面之前最后一次聚焦的？
我在我的WebPage中有一个Wicket表单，在这个表单中有相当多的输入字段(比如文本字段)，用户可以用来过滤我的数据视图。但是，例如，当用户将焦点放在第二个输入字段上，然后单击数据视图中的“转到下一页”时，就会失去焦点，但是由于可访问性，有必要重新调整第二个输入字段的焦点。
我的想法是首先用jQuery标记输入字段，当焦点集中时，使用“重新聚焦”：
$("input").focus(function() {
$("input").removeAttr("regain-
浏览 3提问于2016-03-15得票数 1
回答已采纳
我编写了一个简单的自定义控件，该控件继承自textbox，并使用自定义输入框输入文本：
class TextTextbox : TextBox
{
public string InputBoxTitle { get; set; }
public string Input { get; set; }
public TextTextbox()
{
PreviewMouseDown += MyTextbox_MouseDown;
}
private void MyTextbox_MouseDown(object sender,
浏览 1提问于2014-09-16得票数 0
回答已采纳
我有一个XML数据库和一个XSLT文档，用于在传递给服务器和Angular客户机之前将此XML转换为HTML。然后我使用[innerHTML]显示这个超文本标记语言。我希望能够使用锚标签在页面内导航(例如脚注)，并最终导航到不同的组件。我已经包含了脚注的示例代码。鉴于Angular在使用innerHTML时会删除routerLink属性，我正在处理一个解决方案，编辑DOM元素并手动添加属性和单击行为。然而，这看起来并不是很有意义，所以我想知道是否有更好的方法来做这件事？
document = '<a routerLink="." fragment="45&
浏览 0提问于2020-06-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
