首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular指令没有将css类添加到另一个元素

Angular指令是Angular框架中的一种组件,用于扩展HTML元素的功能和行为。指令可以用于添加、修改或删除元素的属性、样式和行为。

在Angular中,指令可以通过添加CSS类来修改元素的样式。如果发现Angular指令没有将CSS类添加到另一个元素,可能是由于以下几个原因:

  1. 指令未正确绑定到元素:确保指令已经正确地绑定到目标元素上。可以通过在HTML元素上使用指令选择器来绑定指令,例如<div myDirective></div>
  2. 指令逻辑错误:检查指令的逻辑代码,确保在适当的时机添加CSS类。可以在指令的代码中使用ElementRef来获取目标元素,并使用Renderer2来添加CSS类。例如:
代码语言:txt
复制
import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.renderer.addClass(this.elementRef.nativeElement, 'my-css-class');
  }
}
  1. CSS类名错误:检查指令中添加的CSS类名是否正确。确保CSS类名与样式表中定义的类名一致。
  2. CSS样式未加载:如果指令添加的CSS类依赖于外部样式表或样式文件,确保这些样式文件已经正确加载并生效。

总结起来,如果发现Angular指令没有将CSS类添加到另一个元素,需要检查指令的绑定、逻辑代码、CSS类名和样式加载等方面的问题。如果问题仍然存在,可以进一步调试和排查。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-07路由 顶

HeroesComponent添加到AppComponent的指令列表中,以便Angular识别标签。...导入库 Angular路由器是多个服务(ROUTER_PROVIDERS)、指令(ROUTER_DIRECTIVES)和配置的组合。...为此目的,您已经收到了大约60行CSS,包括一些简单的媒体查询响应式设计。 正如您现在所知,CSS添加到组件样式元数据将会隐藏组件逻辑。 相反,您将添加CSS来分隔.css文件。...早些时候,你用元素包围了这些链接: router-link-active Angular路由器router-link-active添加到其路由与活动路由相匹配的HTML导航元素。...应用程序全局样式 样式添加到组件时,可以组件需要的所有内容(HTML,CSS和代码)一起放在一个方便的位置。 把它打包起来很容易,在其他地方重新使用组件。

17.5K30

AngularDart4.0 高级-属性(Attribute)指令

属性的CSS选择器是方括号中的属性名称。这里指令的选择器是[myHighlight]。 Angular定位模板中具有名为myHighlight的属性的所有元素。...Angular为每个匹配元素创建一个指令控制器的新实例,HTML元素注入到构造函数中。...它创建了一个HighlightDirective的实例,并将元素的引用注入到指令的构造函数中,该构造函数元素的背景样式设置为黄色。...它将元数据添加到使指令的highlightColor属性可用于绑定的。 它被称为输入属性,因为数据从绑定表达式流入指令没有这个输入元数据,Angular拒绝绑定; 请参阅下面的更多关于这一点。...概要 该页面介绍了如何: 创建一个修改元素行为的基于的属性指令属性指令应用于模板中的元素。 响应改变基于指令行为的事件。 值绑定到基于指令。 编写一个函数化的属性指令

3.2K10

AngularDart4.0 指南- 模板语法二 顶

Class绑定 您可以使用Class绑定从元素的类属性添加和删除CSS名称。 Class绑定语法类似于属性(property)绑定。...以前缀开始,可选地跟一个点(.)和一个CSS的名字替代括号内的元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加和删除应用程序的“special”。...本节介绍最常用的属性指令: NgClass:添加和删除一组CSS。 NgStyle:添加和删除一组HTML样式。 NgModel:双向数据绑定到HTML表单元素。...isUnchanged, 'special': isSpecial }; } ngClass属性绑定添加到currentClasses,相应地设置元素: <div [ngClass]=...当没有选择NgSwitchCase时,NgSwitchDefault将其元素添加到DOM。 switch指令对于添加和删除组件元素特别有用。

29.9K20

AngularDart Material Design 应用布局 顶

构建 样式由包提供:angular_components/app_layout / layout.scss.css。...对于抽屉外部的主要内容,将其包装在material-content元件中或具有material-content样式元素中。 固定性抽屉 固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。...要使用持久性抽屉,请将persistent 属性添加到material-drawer元素,并将MaterialPersistentDrawerDirective添加到父级的指令列表中。...要使用临时抽屉,请将temporary属性添加到material-drawer元素,并将MaterialTemporaryDrawerComponent添加到父级的指令列表中。...这是使用标准material-list组件和一些特殊的CSS来完成的。 顶级抽屉内容应该是具有可选组元素的MaterialListComponent,这些元素元素上的group属性指定。

4K30

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

angular.module(name,[requires],[configFn]); name:模块名称,必须指定 requires:依赖项,要被添加到注入器服务提供这个模块使用的模块名的数组,如果需要另一个模块的功能...ngClass指令允许你动态设置HTML元素CSS,通过绑定到一个包含要添加的所有的表达式。 ...这个指令不会添加重复的,如果这个已经存在的话。 当表达式改变时,以前添加的会被移除,并且只会添加之后新产生的。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...一个或多个新元素添加到数组未尾,并返回数组新长度 arrayObj. push([item1 [item2 [. . ....[itemN ]]]]); 一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

15.3K100

AngularJS简介

为 HTML 元素提供 CSS 。   绑定 HTML 元素到 HTML 表单 ng-bind 指令把应用程序数据绑定到 HTML 视图。...” }; }); 可以通过以下方式来调用指令元素名、属性、名、注释 restrict 属性设置指令只能通过某些方式来调用 var app = angular.module...” }; }); restrict 值可以是:E 作为元素名使用、A 作为属性使用、C 作为名使用、M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令...CSS ng-model 指令基于它们的状态为 HTML 元素提供了 CSS :ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、 ng-invalid...向指令添加过滤器 过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

5K20

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

angular.module(name,[requires],[configFn]); name:模块名称,必须指定 requires:依赖项,要被添加到注入器服务提供这个模块使用的模块名的数组,如果需要另一个模块的功能...2.9、ng-class与ng-style 指定样式与行内样式。 ngClass指令允许你动态设置HTML元素CSS,通过绑定到一个包含要添加的所有的表达式。 ...这个指令不会添加重复的,如果这个已经存在的话。 当表达式改变时,以前添加的会被移除,并且只会添加之后新产生的。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...4.3、添加元素 一个或多个新元素添加到数组未尾,并返回数组新长度 arrayObj. push([item1 [item2 [. . ....[itemN ]]]]); 一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

12.6K30

Angular 中结构指令模式 - 它们是什么且怎么使用

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你学到什么 在本文中,你学到关于 Angular 结构指令模式的知识点。...学完本文,你更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构的指令。这些指令可以添加、移除或者替换元素。...当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素的副本会添加到 DOM 中。...当条件值是 true 的时候,相关的元素就会被渲染到 DOM 中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM 中。...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。

3.8K20

Angular 英雄编辑器

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性: selector — 组件的 CSS 元素选择器。...styleUrls — 组件私有 CSS 样式表文件的位置。 CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。...所以,只要把  元素添加到 AppComponent 的模板文件(app.component.html)中就可以了,就放在标题下方。...虽然 ngModel 是一个有效的 Angular 指令,不过它在默认情况下是不可用的。 它属于一个可选模块 FormsModule,你必须自行添加此模块才能使用该指令。...你没有声明过 HeroesComponent,可为什么应用却正常工作呢?

2.5K50

Angular 英雄编辑器

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性: selector — 组件的 CSS 元素选择器。...styleUrls — 组件私有 CSS 样式表文件的位置。 CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。...所以,只要把  元素添加到 AppComponent 的模板文件(app.component.html)中就可以了,就放在标题下方。...虽然 ngModel 是一个有效的 Angular 指令,不过它在默认情况下是不可用的。 它属于一个可选模块 FormsModule,你必须自行添加此模块才能使用该指令。...你没有声明过 HeroesComponent,可为什么应用却正常工作呢?

2.6K70

Angular学习笔记(一)

其中最重要的属性是: declarations - 声明本模块中拥有的视图Angular 有三种视图:组件、指令和管道。...@Component 的配置项包括: selector - CSS 选择器,它告诉 Angular 在父级 HTML 中查找标签,创建并插入该组件。...这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。...'red' : 'green'"> 内置属性型指令 NgClass - 添加或移除一组CSS NgStyle - 添加或移除一组CSS样式 NgModel - 双向绑定到HTML表单元素...内置结构型指令 NgIf - 根据条件把一个元素添加到DOM中或从DOM移除 NgSwitch - 一组指令,用于切换一组视图 NgFor - 对列表中的每个条目重复套用同一个模板 模板引用变量 #

3.3K20

AngularDart4.0 英雄之旅-教程-05多组件 顶

@Component注解提供组件的Angular元数据。 CSS选择器名称hero-detail将与在父组件的模板中标识该组件的元素标签相匹配。...将该属性与必要的导入一起添加到HeroDetailComponent中。...这还没有发生! 点击一个英雄。 没有细节。 如果您在浏览器开发工具的控制台中查找错误。 没有错误。 就好像Angular忽略了新的标签。 那是因为它忽略了新的标签。...就像您为内建的Angular指令所做的那样,通过将其列在元数据指令列表中,告诉Angular关于英雄详细信息组件。...您学会了在 directives列表中声明应用程序指令。 您学会了父组件绑定到子组件。 你的应用应该看起来像这个实例(查看源代码)。

1.8K10

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

它允许控件添加到设计图面,然后根据自己的喜好自定义它们。配置完成后,可以生成的代码复制到自己的应用程序中。...目前所做的工作是所有Demo示例升级到Angular V6,并将WijmoJS 支持的TypeScript版本升级到V2.7。...比如,WijmoJS 子组件现在可以在动态场景中正确工作,例如v-for和v-if指令。...WijmoJS Web组件允许用户以声明方式WijmoJS控件添加到HTML页面,并将其作为常用DOM元素进行操作,而无需使用任何其他框架。...例如,WjcFlexGrid组件扩展了FlexGrid控件。这也意味着当WijmoJS 用于“Web组件模式”时,基础WijmoJS 控件扩展了HTML 元素

7K20

AngularDart4.0 指南-体系结构概述 顶

回顾HeroListComponent的代码,你可以看到它只是一个没有一个框架的痕迹,没有Angular的特定代码。 实际上,HeroListComponent实际上只是一个。...指令 ? Angular模板是动态的。 当Angular呈现它们时,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的。...虽然组件在技术上是指令,但组件对于Angular应用程序来说是非常独特和重要的,所以这种架构概述组件与指令分开。 还有其他两种指令:结构和属性指令。...例子包括: 日志服务 数据服务 消息总线 税计算器 应用配置 Angular没有特别指定服务。 Angular没有定义服务。 没有服务基础没有地方注册服务。...如果请求的服务实例不在容器中,那么在服务返回给Angular之前,注入器创建一个并将其添加到容器中。 当所有请求的服务已经解析并返回时,Angular可以用这些服务作为参数调用组件的构造函数。

7.9K30

浅谈Angular

它可通过 标签添加到HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?...来控制元素的显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐...,需要在指令内部获取到宿主元素和承载宿主元素的容器,通过依赖注入templateRef和ViewContainerRef服务 4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等)

4.4K10

AngularDart4.0 指南- 显示数据 顶

请注意,您不要调用new来创建AppComponent的实例。 Angular正在为你创建一个实例。 怎样创建的? @Component注解中的CSS选择器指定了一个名为的元素。...元素中的* ngFor是Angular“repeater”指令。...Angular ngIf指令根据布尔条件插入或删除一个元素。...当组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。...Angular没有显示和隐藏消息。 它正在添加和删除DOM中的段落元素。 这可以提高性能,特别是在大型项目中,当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。

5.3K10
领券