角度：事件绑定不"permanent"

Question

考虑一下我用来学习Angular的AppComponent中的以下代码:

import { Component } from '@angular/core';
@Component({
selector: 'root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string = 'Trade Assist';
tabs = Tabs.tabs;
selectedTabId?: number;
constructor(){}
onTabClick(selectedTabId : number){  
console.log(selectedTabId);
this.selectedTabId = selectedTabId;
}
}

<div class="root">
<div class="header">
<div class="heading">{{title}}</div>
<div class="navbar">
<ul>
<li class="li-l" (click)="onTabClick(1)"><a href="">AAAA</a></li>
<li class="li-l" (click)="onTabClick(2)"><a href="">BBBB</a></li>
</ul>
</div>
</div>
<div class="body">
<ng-container *ngIf="selectedTabId==1"><p>{{selectedTabId}}</p></ng-container>
<ng-container *ngIf="selectedTabId==2"><p>{{selectedTabId}}</p></ng-container>
</div>
</div>

当我单击<li>元素时，我看到事件在一瞬间在<p>元素中返回的1或2。它不会停留在那里。此外，控制台日志记录来来去去……我到底做错了什么?

Answer 1

我认为是什么导致这里的问题是<a href="">元素。一旦你点击了导航链接，它就会像你观察到的那样打印出你想要的结果，但随后会重新加载页面，将selectedTabId重置为undefined。

你可以做的是替换锚标记或删除href属性。

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

如果你想给<li>元素添加路由，你仍然可以通过在元素中使用angular的routerLink来实现。此外，你还需要在你的imports数组中像这样导入RouterModule。

// app.module.ts
imports: [
RouterModule,
....
]
// app.component.html
<li class="li-l" routerLink="/route" (click)="onTabClick(1)"><span>AAAA</span></li>