Angular 8的标签需要点击两次才能显示活动标签；第一次点击获取内容，第二次点击设置样式。_编程开发

Angular 8的标签需要点击两次才能显示活动标签；第一次点击获取内容，第二次点击设置样式。

创始人

2024-10-17 19:32:28

0次

要实现点击一次显示活动标签，需要获取内容，第二次点击设置样式的功能，可以使用Angular的事件绑定和属性绑定来实现。

在HTML模板中，可以使用*ngIf指令来控制标签的显示和隐藏，使用[class]属性绑定来设置标签的样式。

以下是一个示例代码：

在组件的HTML模板中：



  这是活动标签的内容

在组件的TypeScript文件中：

isActive: boolean = false;

toggleActive() {
  this.isActive = !this.isActive;
}

在上述代码中，点击按钮会触发toggleActive()方法，该方法会切换isActive属性的值。当isActive为true时，*ngIf指令会使标签显示，[class.active]会给标签添加active类名，从而设置样式。当isActive为false时，标签会隐藏。

这样，第一次点击按钮会获取内容并显示标签，第二次点击会设置样式。

上一篇：Angular 8的变更检测对可变对象无效。

下一篇：Angular 8的代码流认证无法获取访问令牌。

Angular 8的标签需要点击两次才能显示活动标签；第一次点击获取内容，第二次点击设置样式。

相关内容

热门资讯