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

在Angular中的指令属性元素外部单击时将样式应用于元素

在Angular中,可以通过使用指令来实现在元素外部单击时应用样式的效果。具体步骤如下:

  1. 创建一个指令: 首先,使用Angular的命令行工具(CLI)创建一个新的指令。在命令行中运行以下命令:
  2. 创建一个指令: 首先,使用Angular的命令行工具(CLI)创建一个新的指令。在命令行中运行以下命令:
  3. 这将在项目中创建一个名为ClickOutside的新指令。
  4. 实现指令逻辑: 打开生成的ClickOutside.directive.ts文件,并在其中实现指令的逻辑。在这个例子中,我们希望在元素外部单击时应用样式,因此我们需要监听整个文档的点击事件,并检查点击事件的目标是否在指令所在的元素之外。如果是,则应用样式。
  5. 实现指令逻辑: 打开生成的ClickOutside.directive.ts文件,并在其中实现指令的逻辑。在这个例子中,我们希望在元素外部单击时应用样式,因此我们需要监听整个文档的点击事件,并检查点击事件的目标是否在指令所在的元素之外。如果是,则应用样式。
  6. 应用指令: 在要应用指令的元素上添加指令选择器。在这个例子中,我们将指令选择器设置为appClickOutside
  7. 应用指令: 在要应用指令的元素上添加指令选择器。在这个例子中,我们将指令选择器设置为appClickOutside
  8. 添加样式: 最后,我们需要在CSS文件中定义样式。在这个例子中,我们将样式名设置为highlight
  9. 添加样式: 最后,我们需要在CSS文件中定义样式。在这个例子中,我们将样式名设置为highlight

这样,当在指令所在的元素之外单击时,样式将被应用于该元素,实现了在Angular中的指令属性元素外部单击时将样式应用于元素的效果。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令

该指南在谈论其属性以及指令功能引用了指令类。 指南描述如何指令应用于HTML模板元素引用了属性(attribute)名称。...属性指令改变元素,组件或其他指令外观或行为。 例如,内置NgStyle指令可以同时更改多个元素样式。 您可以许多属性指令应用于一个宿主元素。 您只能将一个结构指令应用于宿主元素。...您仅可以一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。 当两个指令声明相同宿主元素,哪一个优先? NgIf或NgFor应该先走哪一个?...虽然很少有理由模板属性元素形式应用结构指令,但了解Angular创建并了解它工作原理仍然很重要。 当你编写自己结构指令,你会参考。...没有合适宿主元素使用作为分组元素Angular星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

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

全球率先支持 AngularJS外,现已全面应用于 React、Vuejs、TypeScript 、Ionic 等主流框架。...开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序。 要在VSCode安装此扩展,请单击VS Marketplace上Designer设置“安装”按钮。...WijmoJS 本次更新为Vue V2支持增加了很多不错功能。比如,WijmoJS 子组件现在可以动态场景中正确工作,例如v-for和v-if指令。...这也意味着当WijmoJS 用于“Web组件模式”,基础WijmoJS 控件类扩展了HTML 元素类。...Web组件最大好处是,可以不同框架中使用相同组件,并从框架附加功能(如属性属性和事件绑定)受益。

7K20

AngularDart 4.0 高级-生命周期钩子 顶

ngOnInit Angular首次显示数据绑定属性并设置指令/组件输入属性后,初始化指令/组件。 第一次ngOnChanges之后调用一次。...ngAfterContentInit Angular外部内容投影到组件视图之后进行响应。 第一次NgDoCheck之后调用一次。 组件独有的钩子。...此示例SpyDirective应用于由父SpyComponent管理ngFor英雄迭代器。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下name属性构造没有分配值。...这就是深度初始化逻辑所属地方。 OnDestroy 清理逻辑放入ngOnDestroyAngular销毁指令之前必须运行逻辑。 这是通知应用程序另一部分组件将要销毁时间。

6.1K10

Angular 显示英雄列表

,并做如下修改: 顶部添加  然后添加表示无序列表 HTML 元素()   插入一个  元素,以显示单个 hero 属性。...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄详情。 本节,你监听英雄条目的点击事件,并更新英雄详情。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...所选英雄颜色来自于你前面添加样式 CSS 类 .selected。 所以你只要在用户点击一个  把 .selected 类应用到该元素上就可以了。

4K30

Angular 显示英雄列表

,并做如下修改: 顶部添加  然后添加表示无序列表 HTML 元素()   插入一个  元素,以显示单个 hero 属性。...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄详情。 本节,你监听英雄条目的点击事件,并更新英雄详情。...click 外面的圆括号会让 Angular 监听这个  元素 click 事件。 当用户点击  Angular 就会执行表达式 onSelect(hero)。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4.4K70

AngularDart4.0 指南- 表单 顶

Angular可不使用Bootstrap类或任何外部样式Angular应用程序可以使用任何CSS库或不使用。...每个input元素都有一个ngControl指令Angular表单需要用这个指令表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...指令exportAs属性告诉Angular如何引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...NgForm指令补充表单元素附加功能。 它包含用ngModel和ngControl指令元素创建控件,并监视它们属性,包括它们有效性。...提交标志变为真,表格消失。 您将看到表格显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮,该表消失,并且可编辑表单重新出现。

17.4K30

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

“结构指令”页面中了解它们。 属性指令被用作元素属性。 例如,“模板语法”页面内置NgStyle指令可以同时更改多个元素样式属性指令有两种: 基于类:一个全功能属性指令,使用类实现。...Angular为每个匹配元素创建一个指令控制器类新实例,HTML元素注入到构造函数。...应用属性指令 要使用新HighlightDirective,请创建一个将该指令作为属性应用于段落()元素模板。 对Angular来说,元素属性宿主。...它创建了一个HighlightDirective类实例,并将元素引用注入到指令构造函数,该构造函数元素背景样式设置为黄色。...概要 该页面介绍了如何: 创建一个修改元素行为基于类属性指令属性指令应用于模板元素。 响应改变基于类指令行为事件。 值绑定到基于类指令。 编写一个函数化属性指令

3.2K10

AngularDart Material Design 应用布局 顶

这些抽屉实现方式不同,为每种抽屉提供最佳性能。对于抽屉外部主要内容,将其包装在material-content元件或具有material-content样式元素。...抽屉支持deferredConent指令,允许开发人员抽屉不可见(关闭)从页面添加/删除内容。...要使用临时抽屉,请将temporary属性添加到material-drawer元素,并将MaterialTemporaryDrawerComponent添加到父级指令列表。...临时抽屉具有可选overlay属性,可用于抽屉打开非抽屉内容上方显示透明覆盖。...MaterialListItemComponents用于抽屉条目。对于每个组,如果您需要组上标签,请在组元素内直接使用块元素label属性

4K30

AngularDart 4.0 高级-路由概述 顶

它可以浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以路由器绑定到页面上链接,并在用户单击链接导航到适当应用程序视图。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激,您都可以进行命令式导航。并且路由器浏览器历史记录记录活动,所以后退和前进按钮也起作用。...指令授予路由控制这些元素。...RouterLink指令还有助于视觉上区分当前所选活动路线锚点。当关联路由链接变为活动状态,路由router-link-active CSS类添加到元素。...单击具有绑定到链接参数列表routerLink指令元素会触发导航。 Link parameters list 路由将其解释为路由指令列表。

6.1K20

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

RouterLink指令告诉路由在用户点击链接位置。 您使用链接参数列表定义了一个路由指令, 这个列表我们小样本只有一个元素,引用路由名称。...template元数据替换为指向新模板文件templateUrl属性,并添加如下所示指令(还要添加必要导入):lib/src/dashboard_component.dart (metadata...Dashboard 样式 lib / src文件夹创建一个dashboard_component.css文件,并在组件元数据styleUrls列表属性引用该文件,如下所示: lib / src/...你所要做就是定义它风格。 应用程序全局样式 样式添加到组件,可以组件需要所有内容(HTML,CSS和代码)一起放在一个方便位置。 把它打包起来很容易,在其他地方重新使用组件。...您还可以在任何组件之外应用程序级别创建样式。 设计师提供了一些基本样式应用于整个应用程序元素。 这些对应于您在安装期间先前安装全套主样式

17.5K30

AngularDart4.0 英雄之旅-教程-04明细 顶

它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。...接下来,您将通过selectedHero组件属性主链接到详细信息,该属性绑定到单击事件。...添加一个onSelect()方法,selectedHero属性设置为用户单击英雄。...刷新浏览器,该应用程序不再失败,名称列表再次显示浏览器。 当没有选定英雄,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方,很难列表识别选定英雄。

3K30

angular基础面试题_java web面试题

}) Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性指令 — 改变元素、组件或其它指令外观和行为指令...angular 生命周期顺序 ngOnChanges: Angular 设置或重新设置数据绑定输入属性响应。... ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用 ngOnInit: Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。...ngDoCheck:检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应,ngOnChnages之后 ngAfterContentInit:当 Angular外部内容投影进组件视图或指令所在视图之后调用...(仅限本组件) None (全局样式)Emulated (只进不出,全局样式能进来,组件样式出不去) angular 数据双向绑定原理 原理:页面每绑定一个数据或者事件,就会向watch队列中加入一条

13K50

浅谈Angular

ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上从DOM结构移除结构型指令 *ngIf--控制元素显隐性 ?...来控制元素显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入值,需要使用@Input装饰器\....可以给@Input装饰器内部填写一个元数据,这个值是外部使用名字 内部还是使用原来名字 3.如果想要给指令添加元素绑定事件,需要使用@HostListener装饰器 如果要通过指令控制DOM显隐...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件,当前操作那个元素就是事件源。...比如网页元素a标签和input都有onclick事件,当点击a发生onclick事件,事件源就是a标签,当点击input发送onclic事件是,事件源就是input。

4.4K10

使用chrome调试CSS

查看CSS 查看元素对应样式 1、 打开调试工具,点击调试工具左上角检查元素按钮或者快捷键(Ctrl/Cmd + Shift + C) 2、页面选中需要查看元素,被检查元素DOM树以蓝色背景突出显示...####查看外部样式表 1、 styles 选项卡单击CSS规则旁边链接以打开定义规则外部样式表。可以查看样式源文件。...####仅查看实际应用于元素CSS 1、styles 选项卡中会显示适用于元素所有规则,包括已被覆盖声明,如果对覆盖声明不感兴趣,可以点击与 styles 相邻 computed 选项卡,仅查看实际应用于元素...5、当鼠标悬浮在某一行属性,会出现一个圆形箭头按钮,点击可以跳转到styles 选项卡所对应样式处。 查看元素伪状态 1、 styles 选项卡中点击 :hov 。...切换样式声明 1、点击样式声明前复选框就可以切换样式声明 更改元素尺寸 1、 styles 选项卡框模型图中,鼠标悬浮在需要编辑区域,双击,填入需要修改数值,回车。

5.4K20

angularjs学习第七天笔记(系统指令学习)

您好,接着昨天对简单指令学习了解以后,今天开始学习了解angularjs系统指令   系统指令大部分都是以ng开始,这也是为什么自定义指令命名不要以ng开始原因所在   系统指令在学习了分成两个部分进行学习...控制下拉框选中项  1.2、类布尔指令包括:     ng-href 指令:与htmlhref对应,其好处是当为给其赋值     ng-src指令:与htmlsrc对应,表达式生效之前不要加载图像...1、ng-app:DOM元素将被标记为$rootScope起始点          JavaScript代码通过run方法来访问$rootScope。        ...,加载外部html中含有style标签样式可以识别         d. ng-inclue,记载外部htmllink标签可以加载        使用距离:         <div ng-include...值是偶数时值为true     $odd:当$index值是奇数时值为true     ng-repeat在数据列表显示中用比较多,实际使用可以根据其关键字进行样式设置展示     特别说明:集合数据开始坐标是

2.9K10

angularjs学习第七天笔记(系统指令学习)

您好,接着昨天对简单指令学习了解以后,今天开始学习了解angularjs系统指令   系统指令大部分都是以ng开始,这也是为什么自定义指令命名不要以ng开始原因所在   系统指令在学习了分成两个部分进行学习...控制下拉框选中项  1.2、类布尔指令包括:     ng-href 指令:与htmlhref对应,其好处是当为给其赋值     ng-src指令:与htmlsrc对应,表达式生效之前不要加载图像...1、ng-app:DOM元素将被标记为$rootScope起始点          JavaScript代码通过run方法来访问$rootScope。        ...,加载外部html中含有style标签样式可以识别         d. ng-inclue,记载外部htmllink标签可以加载        使用距离:         <div ng-include...:当$index值是偶数时值为true     $odd:当$index值是奇数时值为true     ng-repeat在数据列表显示中用比较多,实际使用可以根据其关键字进行样式设置展示

2.6K30

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

我们示例,操作是单独选项卡打开设计图面,并使用 Angular标记提供上下文,以及源文件该标记位置。 现在单击链接以相邻选项卡打开设计器。...每个可用属性都显示相应类型编辑器,您在此处所做任何更改都会立即应用于所选控件。...对于具有集合控件(例如网格列),设计器允许您添加,删除和修改单个成员。 属性”窗格中找到columns属性,然后单击属性编辑器右侧“显示项目”按钮以显示Angular标记定义八个列。...单击axisY属性齿轮图标,然后format属性设置为字符串c0,表示零小数位货币值。 单击属性”窗格“后退”按钮以返回FlexChart设置。...例如,您可以通过添加适当类型新系列元素,轻松地趋势线添加到图表属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。

5.3K40

前端开发:这10个Chrome扩展你不得不知

这个工具识别和显示元素CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它所有CSS属性。您可以通过快捷键CSSViewer窗体轻松复制您选定元素样式。...您可以检查React组件属性和状态,随意更改属性和状态,并查看所作变化组件树传递过程。 4. JSONView ? 浏览器通常不太擅长显示JSON数据。...ColorPick Eyedropper有一个浮动面板,它悬停在网页元素上方,显示元素颜色。单击元素会将所选元素颜色复制到剪贴板。...使用CSSPeeper,您可以鼠标悬停在网页任何元素上,然后单击鼠标即可复制元素样式。...浏览网页,通常吸引我眼球是页面中正在使用字体。当我对某个文字感兴趣想要查看其使用字体,我会下意识地单击鼠标右键以打开开发人员工具,查看它源代码。但是,这样还是太繁琐了。

2.4K10
领券