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

如何在angular 7或css中单击outside/body后隐藏元素

在Angular 7中,可以使用HostListener装饰器来监听点击事件,并在点击元素外部时隐藏元素。同时,可以使用CSS中的伪类选择器来实现隐藏元素的效果。

首先,在组件的类中引入HostListener装饰器和ElementRef模块:

代码语言:txt
复制
import { Component, HostListener, ElementRef } from '@angular/core';

然后,在组件类中定义一个变量来控制元素的显示与隐藏:

代码语言:txt
复制
export class YourComponent {
  isElementVisible: boolean = false;
}

接下来,在组件类中添加一个方法来处理点击事件,并在点击元素外部时隐藏元素:

代码语言:txt
复制
export class YourComponent {
  isElementVisible: boolean = false;

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent) {
    if (!this.elementRef.nativeElement.contains(event.target)) {
      this.isElementVisible = false;
    }
  }
}

在上述代码中,我们使用了HostListener装饰器来监听document的点击事件。在点击事件的处理方法中,我们通过判断点击的目标元素是否在当前组件的元素内部来决定是否隐藏元素。

最后,在HTML模板中使用ngIf指令来根据isElementVisible变量的值来控制元素的显示与隐藏:

代码语言:txt
复制
<button (click)="isElementVisible = !isElementVisible">Toggle Element</button>

<div *ngIf="isElementVisible">
  <!-- 要隐藏的元素内容 -->
</div>

通过以上步骤,当点击按钮时,元素的显示与隐藏状态会切换,同时点击元素外部时,元素会隐藏起来。

关于CSS方面,可以使用伪类选择器:not来选择除特定元素以外的其他元素,并设置其display属性为none来实现隐藏效果。例如:

代码语言:txt
复制
:not(.your-element-class) {
  display: none;
}

上述CSS代码将隐藏除具有.your-element-class类名的元素以外的所有元素。

希望以上解答对您有帮助!如果您需要了解更多关于Angular 7或CSS的知识,可以参考腾讯云的相关文档和产品:

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

相关·内容

AngularDart4.0 指南- 表单 顶

模板驱动的形式 您可以通过使用本页描述的特定于表单的指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(模型驱动)方法来构建表单。...你还没有使用Angular。 没有绑定额外的指令,只是布局。 在模板驱动的表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...Angular可不使用Bootstrap类任何外部库的样式。 Angular的应用程序可以使用任何CSS不使用。...您将看到表格显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。...模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

17.4K30

Angularjs基础(八)

/bootstrap.min.css">       元素定义一个控制器               循环users 对象数组,每个user 对象放在元素       <button...勾选复选框隐藏DIV 实例:              隐藏DIV <input type="checkbox" ng-model="myCheck...当 HTML <em>元素</em>位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。     此外, 在动画完成<em>后</em>,HTML <em>元素</em>的类集合将被移除。...(如果<em>元素</em>将显示) 使用<em>CSS</em>动画       我们可以使用 <em>CSS</em> transition(过渡) <em>或</em> <em>CSS</em> 动画让 HTML <em>元素</em>产生动画效果, <em>CSS</em>过渡       <em>CSS</em> 过渡可以让我们平滑的将一个

2.9K60

分享5个关于 Vue 的小知识,希望对你有所帮助

3、在Vue.js获取组件内的元素 有时候,我们希望在Vue.js获取组件内的元素。在本文中,我们将讨论如何在Vue.js获取组件内的元素。...要在Vue.js获取组件内的元素,我们可以给想要获取的元素分配一个引用(ref)。然后,我们可以在任何生命周期常规方法中使用this.$refs属性来获取该元素。...然后,在模板,我们添加 v-click-outside 并将其值设置为 onClickOutside,以在单击外部时运行该方法。...当我们单击外部时,应该看到“clicked outside”被记录。 我们可以通过创建自定义指令来检测 Vue.js 中元素外的点击。...在上述所有场景,通过 "v-click-outside" 这个自定义指令,你可以非常简单地处理点击元素外部的事件,进而实现你的交互需求。 5、如何在Vue组件实例内的方法调用过滤器?

19830

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

上面的做法有一个潜在的问题,只有当用户在文档框输入值的时候我们才会去计算,还有更多的输入框,每一个输入框都要绑定。 $scope....ngClass指令允许你动态设置HTML元素CSS类,通过绑定到一个包含要添加的所有类的表达式。 ...如果表达式结果为一个数组,则数组每个元素为使用空格分隔的一个多个类名字符串。 如果表达式结果为一个对象,对象的每个key-value如果键值为真时则键名作为类名。...ngStyle指令允许你在HTML元素上条件化设置CSS样式。...[itemN ]]]]); 将一个多个新元素添加到数组开始,数组元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

15.3K100

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

2.5、$watch 用于监视对象的变化,可以获得变化前的值与变化的值。 上面的做法有一个潜在的问题,只有当用户在文档框输入值的时候我们才会去计算,还有更多的输入框,每一个输入框都要绑定。...2.8、ng-show与ng-hide 用于显示与隐藏元素。 ng-show=true 显示 ng-hide=true 隐藏 ng-if 与 show/hide的原理是不一样的 示例: <!...如果表达式结果为一个数组,则数组每个元素为使用空格分隔的一个多个类名字符串。 如果表达式结果为一个对象,对象的每个key-value如果键值为真时则键名作为类名。...ngStyle指令允许你在HTML元素上条件化设置CSS样式。...[itemN ]]]]); 将一个多个新元素添加到数组开始,数组元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

12.6K30

深入理解Shadow DOM v1

shadow DOM不是超级英雄电影的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(简称DOM)缺少的树封装方法。...W3C文档对象模型(DOM)提供了一个平台和语言无关的应用程序编程接口(API),用于表示和操作存储在HTML和XML文档的信息。 通过使用DOM,程序员可以访问、添加、删除更改元素和内容。...它允许你将隐藏的,分离的DOM链接到元素,这意味着你可以使用HTML和CSS的本地范围。现在可以用更通用的CSS选择器而不必担心命名冲突,并且样式不再泄漏被应用于不恰当的元素。...相反,你添加到shadow DOM的CSS对于hosting元素来说是本地的,不会影响DOM的其他元素: 1Light DOM 2...样式化host元素 通常,要设置host元素的样式,你需要将CSS添加到light DOM,因为这是host元素所在的位置。但是如果你需要在shadow DOM设置host元素的样式呢?

1.1K20

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

当用户点击电子邮件的深层链接时,打开特定英雄的详细视图。 完成,用户将可以像这样浏览应用程序: ? 为了满足这些要求,您将添加Angular路由器到应用程序。...添加路由 应该在用户点击按钮显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...要在其他地方导航,用户可以单击AppComponent的两个链接之一,单击浏览器的后退按钮。...本页“路由链接”部分所述,AppComponent模板的顶级导航将路由器链接设置为目标路由,/dashboard 和/ heroes的固定名称。 这次,您绑定到包含链接参数列表的表达式。...为此目的,您已经收到了大约60行CSS,包括一些简单的媒体查询响应式设计。 正如您现在所知,将CSS添加到组件样式元数据将会隐藏组件逻辑。 相反,您将添加CSS来分隔.css文件。

17.5K30

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

在以下示例,目标是按钮的单击事件。...单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改的size值流向样式绑定,使显示的文本变大变小。...'none' : 'block'">Hide with style 隐藏一个元素与用NgIf去除一个元素是完全不同的。 当你隐藏一个元素时,该元素及其所有的后代仍然保留在DOM。...当NgIf为false时,Angular从DOM删除元素及其后代。 它摧毁了他们的组件,潜在地释放了大量的资源,从而带来了更加快速的用户体验。 展示/隐藏技术适合少数几个后代的元素。...例如,您可以将数字显示为货币,强制文本为大写,筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入值并返回一个转换的值。

29.9K20

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

安装,它会在每个Angular 框架下的WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮,它将打开一个设计界面,用于自定义该特定组件。...开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序。 要在VSCode安装此扩展,请单击VS Marketplace上Designer设置的“安装”按钮。...或者,还可以在VSCode的扩展管理器搜索“wijmo”并从那里安装。 在安装重新加载VSCode。 然后打开一个使用WijmoJS 控件的Angular应用程序并尝试启动设计器。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。...其他流行框架(React,Vue,Polymer等)的示例正在开发。 支持SASS类型的样式 WijmoJS 的控件样式(布局,默认样式)最初是用CSS编写的。但如今,已经完成了SASS样式重写。

7K20

Vue入门---常用指令详解

Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了。...一、指令 v-model 多用于表单元素实现双向数据绑定(同angular的ng-model) v-for 格式: v-for="字段名 in(of) 数组json" 循环数组json(同angular...的ng-repeat),需要注意从vue2开始取消了$index v-show 显示内容 (同angular的ng-show) v-hide 隐藏内容(同angular的ng-hide) v-if...    显示与隐藏  (dom元素的删除添加 同angular的ng-if 默认值为false) v-else-if 必须和v-if连用 v-else 必须和v-if连用  不能单独使用  否则报错   .../node_modules/bootstrap/dist/css/bootstrap.min.css"> 13 <script src="../..

1.6K10
领券