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

如何在material2中使用sidenav的@Output() backdropClick属性?

在material2中,使用sidenav的@Output() backdropClick属性可以实现在点击sidenav背景时触发的事件。具体步骤如下:

  1. 首先,确保已经安装了Angular Material和Material2相关的依赖包。
  2. 在需要使用sidenav的组件中,导入MatSidenavModule和MatIconModule模块,并在@NgModule装饰器的imports数组中添加这两个模块。
代码语言:txt
复制
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatSidenavModule,
    MatIconModule
  ],
  ...
})
  1. 在组件的HTML模板中,使用MatSidenav组件来创建sidenav,并设置backdropClick属性。
代码语言:txt
复制
<mat-sidenav #sidenav (backdropClick)="onBackdropClick()">
  <!-- sidenav内容 -->
</mat-sidenav>
  1. 在组件的TypeScript代码中,定义onBackdropClick()方法来处理点击sidenav背景时的逻辑。
代码语言:txt
复制
onBackdropClick() {
  // 处理点击sidenav背景的逻辑
}

通过以上步骤,就可以在material2中使用sidenav的@Output() backdropClick属性,并在点击sidenav背景时触发相应的事件处理逻辑。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种计算场景,具有高性能、高可靠性和高安全性。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

SNS项目笔记--fab与遮罩

在项目界面搭建过程使用fab时候发现ionic自带控件并没有遮罩这样属性这让我们实际操作起来很不舒服如下图所示: ?...2、研究源码:2.1 fab源码 fab在我们官方API文档很少有介绍,顶多介绍了一些sass属性与close()方法,在我们实际操作过程需要查看fab源码来完成...2.2 遮罩源码遮罩源码根据alert源码样式来获取这里直接贴上源码: <div *ngIf="isShow" class="backdrop-div" (click)="<em>backdropclick</em>...,div中有个<em>backdropclick</em>($event)<em>的</em>click事件,通过这个事件来完成遮罩<em>的</em>点击显示隐藏处理,另event.preventDefault();与event.stopPropagation..._listsActive; } //遮罩<em>的</em>点击事件 <em>backdropclick</em>(e){ //判断点击<em>的</em>是否为遮罩层,是的话隐藏遮罩层,与fablist if(e.srcElement.className

92240

Unity3D学习笔记5——创建子Mesh

Mesh是对于三维物体对象封装概念,一个很容易需求是,有的地方我希望用到材质A,有的地方我希望用到材质B,我不想把这个Mesh进行拆分,那么很简单,就在这个Mesh划分两个子Mesh就可以了。...实现 我们创建如下脚本,并且随便挂接两个不同材质在属性material1和属性material2上: using UnityEngine; using UnityEngine.Rendering;...Material[] materials = new Material[2]; materials[0] = material1; materials[1] = material2...创建顶点属性使用是简单接口,创建顶点索引属性信息使用是高级接口。...通过划分SubMesh方式来描述一个Mesh通常是用于存在多个材质情况,如果使用都是同一个材质,就最好不要作SubMesh划分。

68910
  • Unreal学习笔记2-绘制简单三角形

    概述 之所以写这个绘制简单三角形实例其实是想知道如何在Unreal通过代码绘制自定义Mesh,如果你会绘制一个三角形,那么自然就会绘制复杂Mesh了。所以这是很多图形工作者第一课。 2....代码实现 Actor是Unreal基本显示对象,有点类似于UnityGameObject或者OSGNode。...这里组件初始化是在BeginPlay()创建,如果在构造函数创建,那么就不能使用NewObject,而应该使用如下方法: // Sets default values ACustomMeshActor...最开始我参考就是参考文献1代码,代码设置成双面,但是我自己材质蓝图中用单面,程序启动直接崩溃了。...解析:Section Mesh内部是可以进行划分,划分成多少个section就使用多少个材质,比如这里划分了两个section,最后就使用了两个材质。

    87420

    编程星球——水·滴20180624期

    链接:PrimeNG https://www.primefaces.org/primeng 还有官方Material2: 链接:GitHub - angular/material2: Material...CLS-compliant 类型,意味着无符号类型,:uint, ulong 等等都不可以; 5、关键字名称冲突,xId,yId等,需通过[Key]注解注明; 6、奇葩一个,你新建实体类,但是没有...2018/6/21 #水·滴# C#类字段属性区别: 字段一般用在类内部使用属性一般供外部类访问。...属性相当于是给字段加了一个保护套,如果想读这个字段值,属性里面走一定是get{},如果想给字段赋值,属性里一定走是set{},那么程序员可以在get{}和set{}增加一些限制,验证要赋值内容...对于外部使用者来说只能够使用它,不能控制它,如何控制操作是由类自身决定(或者说是由程序员决定,嘿嘿~)。 另外,字段值可以用作ref、out参数,而属性不能。

    1.6K30

    Angular 6正式版发布,都有哪些新功能

    官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本依赖包,让你依赖包与你应用程序同步,使用 schematics 时,第三方还能提供脚本更新...ng add使用软件包管理器来下载新依赖包并调用安装脚本,它可以通过更改配置和添加额外依赖包( polyfills)来更新你应用。...Material Sidenav Material Sidenav 是带有应用程序名称和侧面导航工具栏初始组件,它基于断点窗口(breakpoints)进行响应。...CLI v6 现已支持多项目工作区,多个应用程序或库,CLI 项目用 angular.json 取代 angular-cli.json 构建和配置项目。...这意味着你可以从应用程序删除此 polyfill,可以节省大约 47KB 内存,同时提高 Safari 动画性能。

    4.2K20

    前端入门学习--CSS

    页面的背景颜色使用在body选择器: body{background-color:#b0c4de;} CSS,颜色值通常以以下方式定义: 十六进制 - :”#ff0000” RGB - ... Margin - 简写属性 为了缩短代码,有可能使用一个属性margin指定所有边距属性。这就是所谓缩写属性。...缩写填充属性也可以使用,一旦改变一切都改变。 填充- 单边内边距属性 在CSS,它可以指定不同侧面不同填充: <!...使用 clear 属性往文本添加图片廊: .text_line { clear:both; } CSS 布局 - 水平 & 垂直对齐 元素居中对齐 要水平居中对齐一个元素( div), 可以使用...使用容器元素(:div)来创建下拉菜单内容,并放在任何你想放位置上。 使用div元素来包裹这些元素,并使用CSS来设置下拉内容样式。

    27.7K20

    Angular 6新特性介绍

    第三方可以使用原理图提供更新脚本。如果您某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码! ng add ng add 也是新增一个cli命令。...一旦添加Material之后,你就可以生成三个新入门组件 Material Sidenav 运行命令: ng generate @angular/material:material-nav --name...如果要了解更多有关Material信息,请点击这里 CLI工作空间 CLI6.0版本现在支持包含多个项目的工作空间,多个应用程序或库。...这也就意味着你可以从你应用移除 polyfill,这样可以减少大约47k空间 RxJS v6 Angular已经更新使用了RxJS v6。...更新@ angular / cli 更新你Angular框架包 更新其他依赖项 Ivy Ivy将会是下一代渲染引擎,现在正在开发。让我们拭目以待吧。 原文链接

    2.3K21

    何在Node.js编写和运行您第一个程序

    实时应用程序(视频流或连续发送和接收数据应用程序)在Node.js编写时可以更高效地运行。 在本教程,您将使用Node.js运行时创建第一个程序。...要在macOS或Ubuntu 18.04上安装它,请按照如何在macOS上安装Node.js和创建本地开发环境步骤或在Ubuntu 18.04上如何安装Node.js使用PPA安装”部分步骤进行操作...JavaScript基本知识,您可以在这里找到: 如何在JavaScript编码 第1步 - 输出到控制台 写一个“Hello,World!”...process.env对象是环境变量名称与作为字符串存储值之间简单映射。 与JavaScript所有对象一样,您可以通过在方括号引用其名称来访问单个属性。...现在运行environment.js程序: node environment.js 输出现在看起来像这样: Output /home/sammy 现在,您只打印process.envHOME属性,而不是打印整个对象

    8.7K30

    从 Newtonsoft.Json 迁移到 System.Text.Json

    3.大小写 默认情况下两者序列化都是 Pascal 命名,及首字母大写,在 JavaScript 以及 Java 等语言中默认是使用驼峰命名,所以在实际业务是离不开使用驼峰。...Newtonsoft.Json:属性特性>类型上特性>Converters 集合 System.Text.Json:属性特性>Converters 集合>类型上特性 官方文档:如何编写用于...8.顺序 自定义属性在 Json 输出顺序: public class Cat { public string?...Newtonsoft.Json 在默认情况下会忽略 JSON 注释。...4.带引号数字 在标准 Json 里,数字类型是不带引号:{"Name":"xiaoshi","Age":18},但有时我们可能会遇到不标准异类,Newtonsoft.Json 默认是支持直接反序列化为数字类型

    2.3K40

    Go:标准库log设计哲学与并发安全探讨

    log包基本结构和用法 下面是一个使用UML描述Go语言log包Logger类型简化模型,展示了Logger类型基本方法和属性。...通过上述模型,我们可以看到Logger结构体提包含了前缀、日志标志和输出目标三个主要属性,以及它提供一系列方法用于不同场景下日志记录。...示例代码 假设以下是一个简化版Logger类型,演示了如何在output方法中使用互斥锁来确保并发安全: go type Logger struct { outMu sync.Mutex out...Logger使用sync.Mutex来确保其output和Writer方法在并发环境下是安全。...对于需要更复杂日志管理功能项目,开发者可以考虑使用更为强大第三方日志库,zap、logrus等。

    15510

    边缘智能:嵌入式系统神经网络应用开发实战

    神经网络在嵌入式系统应用神经网络在嵌入式系统应用广泛,包括但不限于以下领域:1. 图像识别神经网络在边缘设备上用于图像识别,智能摄像头、自动驾驶汽车和无人机。...,通常需要使用深度学习框架,TensorFlow Lite、TensorFlow Micro或MicroTVM等,以便在资源受限环境中有效地运行神经网络模型。...以下是一些简单代码案例,演示了如何在嵌入式系统上使用TensorFlow Lite来运行神经网络模型。4....lib.export_library("deployed_model.so")将TensorFlow模型加载到TVM Relay,然后使用TVM编译为目标特定运行时库。...Edge TPU 示例GoogleEdge TPU是一种专门设计用于加速深度学习推理硬件加速器。以下示例演示了如何在嵌入式系统上使用Edge TPU加速神经网络推理。

    1.1K10

    Spring Cloud 分布式实时日志分析采集三种方案~

    问题:如何在Kibana通过选择不同系统日志模块来查看数据 总结 ---- ELK 已经成为目前最流行集中式日志解决方案,它主要是由Beats 、Logstash 、Elasticsearch...解决方案:使用Filebeat或Logstashmultiline多行合并插件来实现 在使用multiline多行合并插件时候需要注意,不同ELK部署架构可能multiline使用方式也不同,...after,Logstash配置what属性值为next,相当于Filebeatbefore。...解决方案:使用grok分词插件与date时间格式化插件来实现 在Logstash配置文件过滤器配置grok分词插件与date时间格式化插件,: input {     beats {     port...问题:如何在Kibana通过选择不同系统日志模块来查看数据 一般在Kibana显示日志数据混合了来自不同系统模块数据,那么如何来选择或者过滤只查看指定系统模块日志数据?

    1.8K40

    PHP面向对象-静态属性和静态方法(二)

    如果您需要在静态属性或方法访问非静态属性或方法,则需要使用“self”关键字来引用当前类。静态属性和方法可见性必须是公共(public)。...如果您需要在静态属性或方法访问常量,则需要使用“self”关键字来引用当前类,并使用“::”运算符来访问常量。静态属性和方法生命周期与脚本运行时间相同。...静态属性和方法示例下面是一个简单示例,展示了如何在PHP中使用静态属性和方法:class Car { public static $numCars = 0; public $make; public...: 2echo $car1->make; // Output: Fordecho Car::getNumCars(); // Output: 2在上面的代码,我们定义了一个名为Car类,并在类定义了一个名为...在脚本,我们创建了两个Car实例,并使用静态属性$numCars和getNumCars()来获取创建车辆数。

    65631
    领券