标签：贴合 视图 ngFor 初识 TabBar 组件 emmet css

根组件下面包含了很多的子组件

组件就是控制屏幕的某一个部分，某一个区域


组件是可以相互包含的
组件是定义在类里面的，类里面有属性和方法


注解会标记一个class是component

模板决定了组件长得什么样子

style是风格什么样子






开始做顶部的tabBar
把原来的代码都删除掉







emmet
emmet的语法：
https://docs.emmet.io/

先写上这三个




写css：

这样就横过来显示，不是竖着显示了

上下为0 左右为5px

四个是上右下左，是对称的，所以可以写成 0 5 这种形式

这样之间就有了间隔

把文字下面的斜划线去掉


左右和上面都没有贴合

还是没有很好的贴合的，主要是由于它外部产生的
 
在最外层的styles.css内去写css代码。这个是全局的




现在就全完的贴合了

ngFor

使用ngFor循环的形式

这就要求tabs是一个数组
在ts内定义属性，这是个数组

ngFor循环出来的菜单


ngFor是一个指令

回顾

组件就是控制屏幕的某块区域的视图
class通过属性和方法与视图交互



html的内容可以这么写，这是内敛的写法


ant design的例子都是内联的写法
https://ng.ant.design/components/grid/zh




通过chrome的插件Augury看组件Tree

这里可以查看依赖注入的顺序









 

标签：贴合,视图,ngFor,初识,TabBar,组件,emmet,css
来源： https://www.cnblogs.com/wangjunwei/p/11102486.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。