Angular事件绑定不持久问题排查

问题根源 #

你的<a>标签设置了空的href=""，点击时浏览器会触发默认的页面刷新行为——这会导致Angular组件被重新初始化，刚赋值的selectedTabId立刻被重置，所以页面内容和控制台日志才会一闪即逝。

解决方法 #

有几种简单的修复方式，选一种适合你的即可：

方法1：阻止标签的默认行为 #

在点击事件中添加$event.preventDefault()，阻止浏览器的刷新动作：

<li class="li-l">
  <a href="" (click)="onTabClick(1); $event.preventDefault()">AAAA</a>
</li>
<li class="li-l">
  <a href="" (click)="onTabClick(2); $event.preventDefault()">BBBB</a>
</li>

方法2：修改的href属性 #

把空的href=""替换成javascript:void(0)，避免触发默认跳转：

<li class="li-l">
  <a href="javascript:void(0)" (click)="onTabClick(1)">AAAA</a>
</li>
<li class="li-l">
  <a href="javascript:void(0)" (click)="onTabClick(2)">BBBB</a>
</li>

方法3：移除不必要的标签 #

如果不需要<a>标签的跳转语义，直接把点击事件绑定在<li>上，去掉<a>：

<li class="li-l" (click)="onTabClick(1)">AAAA</li>
<li class="li-l" (click)="onTabClick(2)">BBBB</li>

额外提醒 #

你的组件代码里用到了Tabs.tabs，但没有看到Tabs枚举/对象的定义，后续如果出现相关报错，记得补充这个声明。

内容的提问来源于stack exchange，提问作者Rico Strydom