bootstrap class.active在Angular 8中不工作

在Angular 8中，bootstrap class.active不起作用的原因可能是由于CSS样式的问题或者Angular的组件渲染机制导致的。

首先，class.active是Bootstrap框架中用于表示当前活动状态的CSS类。在Angular中，如果要使用Bootstrap的样式，需要在项目中引入Bootstrap的CSS文件。确保在index.html文件中的<head>标签内引入了Bootstrap的CSS文件，例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

如果已经引入了Bootstrap的CSS文件，但class.active仍然不起作用，可能是由于CSS选择器的优先级问题。可以尝试使用更具体的选择器来覆盖默认样式，例如：

.navbar .nav-link.active {
  background-color: red;
}

另外，Angular使用组件化的方式来构建应用程序。如果class.active是应用于Angular组件的元素上，可能是由于组件的渲染机制导致的。在Angular中，组件的样式是通过组件的CSS文件来定义的。确保在组件的CSS文件中正确地定义了class.active的样式，例如：

.active {
  background-color: red;
}

如果以上方法都没有解决问题，可以尝试使用Angular的调试工具来查看元素的样式是否被正确应用。可以使用浏览器的开发者工具或Angular自带的调试工具来检查元素的样式是否包含了class.active。

关于Angular 8的更多信息和使用方法，可以参考腾讯云的Angular产品文档：Angular产品介绍。

请注意，以上答案仅针对Angular 8中bootstrap class.active不工作的情况，具体问题可能需要根据实际情况进行调试和分析。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

关于在angular2及以上版本引入bootstrap 并有提示功能

花了一些时间来研究关于angular2及以上版本引入bootstrap 并有提示功能如果按照正常来的话:在angular2中引入bootstrap,没有提示功能的: 第一步:cnpm install...bootstrap --save; 第二步:cnpm install @types/bootstrap --save-dev; 第三步:找到angular/cli 在styles中添加 ...../nodu_modules..............bootstrap.min.css 路径. 这样便可以在组件中使用bootstrap 的css样式了....于是我就换了一种方式: 第一步,一样安装cnpm install bootstrap --save; 第二步:找到bootstrap的目录,把里面的less文件夹copy到assets/css 目录,.../less/bootstrap.less"; 第四步: 到根目录中找到styles.css @import "./assets/css/index.css"; OK,大功告成!

5203 0

Angular 2 + 折腾记：(6) 动手实现只有年月的小组件

// 月份是字符串，年份是数字 active:false, type:'year' // 月份是'month' }复制代码页面样式就自行折腾啦，我这里只是用了最直白粗暴的下拉滑动在ng4...年份 1 就相当于 0% -> 100%复制代码封装成一个模块给其他使用 import { NgModule } from '@angular/core'; import { CommonModule...} from '@angular/common'; import { FormsModule } from '@angular/forms'; import { OnlyYearMonthSelectComponent

7431 0

在公司制度不规范的情况下，如何做好测试工作？

首先我要说，公司目前制度不规范，对我们来说是个机遇，绝对是个机遇！遇到这个好机会你还在等什么？如果说这个公司已经足够好了，那他还请你过来做什么？你的能力还足以让公司有更高的提升么？...我们的选择要么改变自己要么改变别人，千万不要一方面抱怨公司，另一方面还赖在公司不走，那是最令人鄙视的人生了！二、对于已经做管理层，有机会改变公司现状的，那恭喜你。...如果要，那恭喜，你一定要得到尚方宝剑，特别是对于比较国企话的公司，否则出师无名，人家不拽你。如果上面没这个要抓测试提高质量的目的，你怎么办？跟上面忽悠呗！...问他们对今后的测试有啥意见，他们想怎么搞，然后，好，跟他们交换思路，把你的大致想法讲给他们听，看看他们什么意见，肯定会有很多好意见的，因为人家也想趁着这个机会提高质量少给自己以后的工作找麻烦。...这个过程可能需要经过2轮，因为要将自己修改后的东西在和别人沟通么。

1.2K3 0

AngularJS7那些不得不说的事故

这时候如果是以前建立的项目，使用保留的package.json直接安装依赖包，自动在老版本下工作就好，不一定必须升级到AngularJS新版本，通常这样能省事不少。 ...在AngularJS7中使用JQuery.js/Bootstrap等第三方功能库这几个包是在使用传统html页面的时候常用的，JQuery.js在很多的框架中已经不建议使用了，而是使用框架的组件或组件通讯类功能来完成相似的功能..."node_modules/bootstrap-switch/dist/js/bootstrap-switch.js"] 需要注意，如果是AngularJS4, 文件名应当是.angular.json...使用自己积累的js库在日常的工作中，大多程序员肯定都保存了不少的函数库、功能库。这些库可以直接在typescript中引用，不需要改名字，引用的时候也不需要添加后缀。...然后在另外的工作目录中，安装babel的工作环境： npm install -g babel-cli npm init npm install --save-dev babel-preset-es2015

1.5K1 0

Angular 2 版本的 ng-bootstrap 初体验

Angular 2 版本的 ng-bootstrap 初体验最近 angular-ui 团队终于正式发布了基于 Angular 2 的 Bootstrap 界面库 ng-bootstrap ，工作中一直用...准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的，因此需要先准备 Angular 2 的环境，参考 Angular 2 的 5 MIN QUICKSTART...再来一个稍微复杂一点儿的，在 app.component.ts 文件中添加下面的代码： export class AppComponent implements OnInit { alert...不过总的来说， ng-bootstrap 的推出将会极大的推进 Angular 2 在实际项目中的应用，而不只是停留在 demo 阶段，因为 AngularJS 1.x 时期，很多项目都是以 AngularJS...+ UI-Bootstrap 为基础的，现在有了 Angular 2 的 ng-bootstrap ，相信已经由很多人蠢蠢欲动了吧！

1.5K2 0

用Angule Cli创建Angular项目

Angular4.0来了，更小，更快，改动少接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备： 1）在开始工作之前我们必须设置好开发环境如果你的机器上还没有安装...3.在项目中引入bootstrap和jQuery 　　　　这里我使用webstorm的Terminal，直接在终端操作 cnpm install bootstrap --save cnpm install...jquery --save 我们在项目中就添加了bootstrap和jQuery，我们可以在node_modules文件夹中找到他们（这个文件夹放的是第三方库）；然后我们需要操作.angular-cli.json...文件，把bootstrap和jQuery添加进去: 这里需要注意的是：因为angular用的是微软开发的typescript语言，我们需要在终端做下面的操作，以便让typescript认识bootstrap...这样我们就在项目中正常使用bootstrap和jQuery了 4）项目的启动启动项目我们可以直接通过： ng serve 或者是 npm start 这两个的默认端口都是4200： http://

1.5K6 0

如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

我们将使用Bower来安装Bootstrap和AngularJS，并说明它们在Nginx Web服务器上运行一个简单的应用程序。...在接下来的步骤中，我们将会制作一个新的Bower项目用Bower安装Bootstrap 用Bower安装AngularJS 通过Nginx服务网站在本教程结束时，在Bower Reference部分中...在我们可以在/usr/share/nginx/html目录中进行任何工作之前，我们必须为我们的sudo用户授予权限。...问题中了解更多相关信息对于生产项目，您可能希望填写authors字段和其他设置，以便其他人了解有关该项目的更多信息该homepage设置仅用于显示您自己的网站，与您运行此应用程序的实际服务器的设置无关现在，您的工作目录...against git://github.com/angular/bower-angular.git#~1.4.3 bower bootstrap#* cached git:

2.8K0 0

AngularJS2.0 教程系列（一）

Angular团队希望在Angular2中将复杂性封装地更好一些，让暴露出来的概念和开发接口更简单。 ?...渲染组件到DOM 将组件渲染到DOM上，需要使用自举/bootstrap函数： bootstrap(EzApp); 这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。..."ez-app"})]; 很显然，注解可以看做编译器（traceur）层面的语法糖，但和python的装饰器不同，注解在编译时仅仅被放在annotation里，编译器并不进行解释展开 - 这个解释的工作是...，可能隐约会感受到Angular2中bootstrap的一些变化 - 我指的并非代码形式上的变化。...以组件为核心在Angular1.x中，bootstrap是围绕DOM元素展开的，无论你使用ng-app还是手动执行bootstrap()函数，自举过程是建立在DOM之上的。

2.4K1 0

揭秘AngularJS工作原理

如果浏览器在DOM中找到ng-app指令，它会为我们自动启动应用。如果没有找到这个指令Angular期望我们自己手动启动应用。...要手动启动一个AngularJS应用，可以使用Angular的bootstrap()方法。...var ele = document.createElement("div"); Angular.bootstrap(ele, ['myApp']); Angular.bootstrap(document...一、视图的工作原理：浏览器在提取脚本时（从script标签中），会暂停DOM解析并等待脚本取回。...Angular在apply()方法内调用指令。Angular在rootScope上启动$digest循环时开始整个过程的，并会传播到所有子作用域中。

1.5K4 1

基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

如果你不懂 Vue 也没关系，我们在搭建主应用基座的教程尽量不涉及 Vue 的 API，涉及到 API 的地方都会给出解释。...micro-app 注册微应用在创建好了 Vue 微应用后，我们可以开始我们的接入工作了。...micro-app 注册微应用在创建好了 React 微应用后，我们可以开始我们的接入工作了。...micro-app 注册微应用在创建好了 Angular 微应用后，我们可以开始我们的接入工作了。...// micro-app-main/src/main.js // 为 Angular 微应用所做的 zone 包注入 import "zone.js/dist/zone"; 配置微应用在主应用的工作完成后

6.7K4 0

Angular 启用预加载

在使用路由延迟加载中，我们介绍了如何使用模块来拆分应用，在访问到这个模块的时候， Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候，会有一点延迟。...在 Angular 渲染 Home 组件之后，用户就可以与应用交互了，我们可以通过简单的配置在后台预加载其它模块。启用预加载我们在 forRoot 函数中，提供一个预加载的策略。...定制预加载策略 router 包中预定义了两个策略：不预加载 NoPreloading 预加载所有模块 PreloadAllModules 5 秒之后加载模块但是，您可以自己定义一个定制的策略。...routes, { preloadingStrategy: CustomPreloadingStrategy }) ], providers: [CustomPreloadingStrategy ], bootstrap...routes, { preloadingStrategy: PreloadSelectedModules }) ], providers: [PreloadSelectedModules ], bootstrap

1.5K0 0

Angular 5 快速入门与提高

class EzComp{} 在Angular框架中，__组件__就是指一个应用了Component装饰器的类。...：声明启动引导哪个组件，必须是编译过的组件需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations...平台对象的bootstrapModule()方法用来启动指定的NG模块，启动的绝大部分工作，在于利用JIT编译器编译NG模块和组件，当这些编译工作都完成后，则根据启动模块的 bootstrap元信息，...在早期，Angular 只有即时编译（JIT：Just In Time），也就是说应用代码是在运行时编译的。...如果不尝试了解从模板到视图对象这个过程究竟发生了什么，我相信你始终会有一种失控的感觉。另一方面原因在于，Angular是一个框架，它搭好了应用程序的架子，留了一些空隙让开发者填充。

1.8K2 0

Angular 从入坑到挖坑 - 模块简介

NgModule 简介在 Angular 应用中，至少会存在一个 NgModule，也就是应用的根模块（AppModule）,通过引导这个根模块就可以启动整个项目像开发中使用到 FormsModule...、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule，在开发中通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块，专注于系统的某个功能模块...每个组件都只能声明在一个 NgModule 类中，同时，如果你使用了未声明过的组件，Angular 将会报错同样的，对于当前模块使用到的自定义指令、自定义管道，也需要在 declarations 数组中进行声明...imports imports 数组表明当前模块正常工作时需要引入哪些的模块，例如这里使用到的 BrowserModule、AppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule...Angular 应用通过引导根模块来启动的，因为会涉及到构建组件树，形成实际的 DOM，因此需要在 bootstrap 数组中添加根组件用来作为组件树的根 3.3、特性模块特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来

1.8K2 0

Angular 2 架构（上)

(Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展示了每个部分是如何相互工作的：图中的模板...本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。 bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。...创建 Angular 组件的方法有三步：从 @angular/core 中引入 Component 修饰器建立一个普通的类，并用 @Component 修饰它在 @Component 中，设置 selector...以下是一个简单是实例：网站地址 : {{site}} 在Angular中，默认使用的是双大括号作为插值语法，大括号中间的值通常是一个组件属性的变量名。...你可以把元数据附加到这个类上来告诉 Angular Component 是一个组件。在 TypeScript 中，我们用装饰器 (decorator) 来附加元数据。

1.4K1 0

Angular 2 模块（Modules）

小规模的应用程序中也许只有一个根模块，大多数应用有许多功能模块，每个耦合的代码块作用于程序域、工作流或是密切相关的功能。...Angular有许多的修饰符，通过给类附加元数据可以知道这些类的的意义，它们如何工作。学习更多关于网页元数据。 NgModule 是一个描述符函数，描述模块的单一元数据对象。...开发中你可以在main.ts中引导AppModule，如下所示： import { platformBrowserDynamic } from '@angular/platform-browser-dynamic...这完全不同也和Angular 模块系统无关。在 JavaScript 中，每个文件就是一个模块，所有定义在文件中的对象都属于模块。模块定义公有对象通过关键词export标记这些对象。...这是两种不同的和完整的模块系统，在应用中同时使用它们。

8847 0

【玩转腾讯云】2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI

其中 Angular 版本的 Material 组件库，现在已经是Angular官方指定的组件库，所以受众特别多，不管是在Github的Star/Fork数，还是在NPM的周下载量都是TOP 1的。...可见Bootstrap的受欢迎程度，因此基于Bootstrap的Angular组件库也很受欢迎就不难想象了。...，它们都可以只使用Bootstrap无需使用jQuery就可以在Angular中使用。...因此我们可以大致了解，NGX Bootstrap是一个比较早的库，并且能支持Angular 2+和Bootstrap 3+，而NG Bootstrap则比较新，需要Angular 5+和Bootstrap...DevUI 在 2017年初的时候就已经在 DevCloud 众多业务中使用，经过这许多年，DevUI 已经经受了 DevCloud 大量线上用户的考验，成为稳定、高效、体验流畅的 Angular 组件库

1.8K3 0

Angular 路由配置（预加载配置，懒加载配置）

管道等是否可以使用，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，也就是说，如果你定义的 NgModule 不...: []//默认启动哪个组件(只有根模块才能设置bootstrap属性) }) 复制代码 3.懒加载说明（1）RouterModule对象提供了两个静态的方法:forRoot()和forChild(...(routes, { preloadingStrategy: PreloadAllModules }) ], 　　providers: [], 　　bootstrap: [AppComponent]...文件（需要在app-routing.module.ts中的providers注入，然后在路由中定义的data通过附加参数来设置是否预加载） import { Injectable } from '@angular...B.component.html B.component.scss B.component.ts 比如在上面main.component.html有个区域用于放子视图（以下我都先讲思路，再放关键代码，其他不赘述

3.2K3 0

开源项目——5种技术编写的7个demo工程

官网文档+搜索引擎+一点经验解决工作中百分之九十五的问题。。 angular_demo 1.项目简介使用Angular框架和TypeScript编写的前端项目。...NG-ZORRO和ng-bootstrap 在项目中引入所需要的具体组件在html文件中绘制布局，在ts文件中编写逻辑 5.技术准备 TS语法 Angular基础知识组件库文档NG-ZORRO和ng-bootstrap...在职业生涯的初期，自己一直在写Angular，从Angular.js到Angular7,8,11，由于对前端没有一点的兴趣，唉，工作之外的时间都去学java写后台了，一直也没有深入了解angular，就是...提高自己的生产力，就是让自己更值钱，接下来的一年也会朝着专精一门的方向发展，除却计算机基础知识的学习外，在flutter和android上提高自己的技术深度。争取在工作三年之际给自己一个满意的答案。...这两年总是在迷茫和换工作中度过，很多自己想做的事情都被准备面试耽误了，这份工作无论如何也要做一年多，把自己想做的东西，想学的知识有条不紊的完成，也算对得起自己。

1.1K0 0

最受推荐的 9本全栈开发书籍，助web前端开发学习

如今全栈工程师在企业工作中占有的地位越来越高，无论是前端工程师，还是后端工程师，都在拼命向全栈发展！...这本书结合实际示例，使用Vue与Laravel，帮助你建立现代全栈的web应用程序，在本书中，你将搭建一个名为Vuebnb的订房网站。...3、《Rails, Angular, Postgres, and Bootstrap》 Rails是构建web应用程序的一个很好的工具，但不是最好的，通过Angular 4、Bootstrap和PostgreSQL...然而，它是有一定难度系数的，并不是一个简单的工作指南。MEAN工作流程不断推进，因此书籍可能会很快变得过时。...或者程序逻辑进行分离的要求，并将这些要求转化成前台的开发工作。前端就是网站的门面，它的价值远大于其他的客户端开发。

4K1 0

Angular中ui-select的使用

Angular中ui-select的使用最近工作一直很忙，没有时间整理知识，前几天项目中需要用到angular-ui-select，实现下拉框快速过滤效果，今天有时间研究了一下，终于搞明白了。...一、准备工作 1.安装依赖包（1）Angular --- V1.4.9 （2）Angular-sanitize --- V1.2.28 （3）Angular-ui-select --- ...V0.12.1 （4）Bootstrap --- V3.3.6 如果有需要再引入jQuery 注意: Angular-sanitize所依赖的Angular最低版本，Angular-ui-select...注意引入的先后顺序 2.html代码 1 8 9 10 11 ui-select-match 匹配所输或所选项在文本框展示

3K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云