angular @component中需要知道的属性_component encapsulation-程序员宅基地

技术标签: angular  

encapsulation:组件样式封装策略

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  encapsulation:ViewEncapsulation.Emulated  //不写则默认该值
})

encapsulation提供三个值:

ViewEncapsulation.Native:在angular10.0中已经去除。

ViewEncapsulation.Emulated:默认值,表示该组件样式只作用于组件本身,不影响全局样式,在head中生成单独的style标签。 (通常这是我们最希望的)

ViewEncapsulation.None:表示该组件样式作用于全局,会影响全局样式,在head中生成单独的style标签。(如果想作用于全局,我想可以直接在style.less中写,没必要在某个组件中写全局样式)

ViewEncapsulation.ShadowDom:使用Shadow DOM封装样式,并为组件的宿主元素创建一个ShadowRoot。(有时间去看shadowDom)

interpolation:  改写默认的插值表达式起止分界符({ { 和 }})

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  interpolation:['~~', '~~'],
})

export class IndexComponent implements OnInit {
    chooseSortIndex = 0;
}

改变之后插值表达式就变成这样了

<div>~~chooseSortIndex~~</div>  //改成自己喜欢的还是不错的

preserveWhitespaces:默认为 false,除非通过编译器选项改写了它。为 true 则保留,为 false 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 \s 的字符。

animations:一个或多个动画 trigger() 调用,即调用angular animation动画。

exportAs:  定义一个名字,用于在模板中把该指令赋值给一个变量。即给指令定义一个别名,然后可以在使用了该指令的模板中赋值给模板变量,这样通过模板变量就可以调用该指令的一些方法了。

自定义appInfiniteScroll指令

import {Directive,ElementRef,Input,Output,EventEmitter,} from '@angular/core';
@Directive({
  selector: '[appInfiniteScroll]',
  outputs: ['pageChange'],
  exportAs:'iiii'
})
export class InfiniteScrollDirective {

  ngOnInit() {

  }

  aa(){
    alert('112')
  }

}

某组件html中使用(exportAs使自定义指令更加灵活)

<div appInfiniteScroll #aac="iiii" (click)="aac.aa()">哈哈哈</div>

其他补充中...

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44708870/article/details/109580470

智能推荐

Docker常用命令_/home/mysql /var/lib/docker/overlay2/c627b652960e7-程序员宅基地

文章浏览阅读694次。Docker常用命令帮助命令docker version #显示docker版本信息docker info #显示dicker的系统信息 包括镜像和容器的数量dockers 命令 --help #帮助命令帮助文档的地址 https://docs.docker.com/engine/reference/commandline镜像命令​ docker images 查看所有本地主机上上的镜像[root@localhost ~]# docker imagesREPOSITORY _/home/mysql /var/lib/docker/overlay2/c627b652960e74237c25b7bd8b7485fc7971078

信息学奥赛一本通 2006:【20CSPJ普及组】表达式 | 洛谷 P7073 [CSP-J2020] 表达式_2006:【20cspj普及组】表达式-程序员宅基地

文章浏览阅读934次。【题目链接】ybt 2006:【20CSPJ普及组】表达式洛谷 P7073 [CSP-J2020] 表达式【题目考点】后缀表达式表达式树通过后缀表达式建立表达式树:遍历后缀表达式字符串:若读取到数字,生成结点,入栈若读取到运算符,生成运算符结点,出栈两个结点,分别作为运算符结点的左右孩子,将运算符结点入栈最后栈顶结点就是表达式树的根结点【解题思路】题中求的是布尔表达式,问改变某个变量的值后,整个式子的值是否变化。由此可知,我们需要求出一个布尔型的数组isChange_2006:【20cspj普及组】表达式

Android项目开发如何设计整体架构?大牛最佳总结-程序员宅基地

文章浏览阅读321次。前言金九银十面试季,相信大家肯定急需一套Android面试宝典,今天小编就给大家准备了我珍藏已久的Android高阶面试宝典,一份超级详细的Android面试必备知识点,供大家学习 !想必每一个安卓程序员都有追求大厂的决心,但是想要进入大厂,我们需要掌握哪些知识点呢?这里,我为大家梳理了一个整体的知识架构。整体包括Java、Android、算法、网络等。希望大家阅读之后,能帮助大家完善与整理自己的知识体系。祝大家面试顺利~~文末还有给大家分享我整理的Android面试专题及答案可以拿去参考下~注.

IOS之OC入门--类方法和对象方法_oc机器人ios怎么弄-程序员宅基地

文章浏览阅读429次。代码时错误的 主要是为了了解类方法和对象方法的使用时注意的一些细节/* 4.设计一个成绩类 * C语言成绩(可读可写) * OC成绩(可读可写) * 总分(只读) * 平局分(只读) */# import @interface Score : NSObject{ double _cScore; //C语言成绩 double _ocScore; /_oc机器人ios怎么弄

js飞翔的小鸟_javascript做飞翔的小鸟难不难-程序员宅基地

文章浏览阅读704次。提示:未经本人同意,请不要转载哦。一个简单易懂js飞翔的小鸟游戏 代码写的可能不是很好,可以学个思路由于管道图片没找到,就自己搜了一张一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、css排版部分 * { margin: 0; padding: 0; } #box { width: 343px; _javascript做飞翔的小鸟难不难

电源篇 -- PCB布局布线_电源摆放 pcb-程序员宅基地

文章浏览阅读1w次,点赞15次,收藏123次。​感谢阅读本文,在接下来很长的一段时间里,我将陆续分享项目实战经验。从电源、单片机、晶体管、驱动电路、显示电路、有线通讯、无线通信、传感器、原理图设计、PCB设计、软件设计、上位机等,给新手综合学习的平台,给老司机交流的平台。所有文章来源于项目实战,属于原创。一、设计思路本文以BUCK降压拓扑为例进行讲解,其它拓扑结构设计思路大同小异,BUCK降压拓扑如下图:1、功率环路尽量小。基于电磁场..._电源摆放 pcb

随便推点

【基于知识图谱的前后端(vue+django)分离的问答系统的设计与实现(一):总体介绍】_vue实现大模型问答-程序员宅基地

文章浏览阅读6.7k次,点赞15次,收藏118次。问答系统实现的方式有许多种,有问答对的,有从网络社区搜索答案的,知识图谱只是其中一种实现方式。基于知识图谱的问答系统离不开对自然语言的处理,以及知识图谱的建立。前端部分。前端界面采用基于node的vue.js3来实现,这是一个渐进式的开发框架,主要用到element UI plus 组件库。 后端部分。使用python语言的Django框架,django框架可以提供方便快捷的后台管理模型,利于快速搭建系统。数据库用到neo4j_vue实现大模型问答

MySQL数据库之多表操作_select department.did,department.dname,employee.na-程序员宅基地

文章浏览阅读1.3k次。首先说一下什么是外键,外键是指引用另外一个表中的一列或多列,被引用的列应该具有主键约束或唯一性约束。使用外键的好处就是保证数据的完整性。比如说有一个班级表和一个学生表,当删除一个班级的时候,学生表中班级的id就相当于是垃圾数据或者错误数据。所以学生表使用外键关联到班级表,当删除班级的时候,只有学生表中没有使用该班级的id(也就是没有该班级的学生时)才可以删除班级,若有学生的话,必须先删除学生,或者_select department.did,department.dname,employee.name from department left jo

能用HTML/CSS解决的问题就不要使用JS_html点击导航栏切换内容不用js-程序员宅基地

文章浏览阅读3.8k次,点赞3次,收藏3次。为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。1. 导航高亮导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。在正常态时,每个导航的默认样式为:nav li{ ..._html点击导航栏切换内容不用js

宏替换、重命名_用一个宏把另一个宏重新命名-程序员宅基地

文章浏览阅读2.2k次。一、宏替换#include #defineMAX 5void main(){ int a= MAX; count}这个程序定义了一个自定义宏MAX,它的替换文字是5,在程序开始编译之前,驰处理器会完成宏替换的操作,将这个程序文件中的所以MAX都替换成5,然后编译器再执行编译.二、重命名1)与#define的区别typed_用一个宏把另一个宏重新命名

07HTML5学习之表格_按照如下要求编程实现如图所示表格。 (1)表格标题为“教材表”,采用3号标题字标记-程序员宅基地

文章浏览阅读242次。文章目录1 表格概览1.1 表格元素1.1.1 border属性1.1.2 表格标题2 表格行、单元格与表头2.1 表格行元素2.2 表格数据元素2.3 表格表头元素3 跨行和跨列3.1 colspan属性3.2 rowspan属性4 配置一张可无障碍访问的表格5 用CSS设置表格样式1 表格概览  使用表格的目的在于组织信息。表格定义从<table>标签开始,</tab..._按照如下要求编程实现如图所示表格。 (1)表格标题为“教材表”,采用3号标题字标记

Ubuntu 14.02 jekyll 搭建_ubuntu jekyll undefined method jekyll::drop-程序员宅基地

文章浏览阅读737次。Ruby 安装安装ruby,ubuntu14.02没有预装ruby,可以通过apt-get安装,但是通过apt-get安装的版本是ruby1.8或者ruby1.9,貌似安装jekyll需要2.0版本以上才行,因此这里用包来安装下载 ruby 安装包,http://rubyinstaller.org/downloads/ 这里我选择的是2.3.0,可以直接下载包下来,或者命令行用wget来下_ubuntu jekyll undefined method jekyll::drop

推荐文章

热门文章

相关标签