Angular权威教程之内置指令篇_angular ngswitch default,2024年阿里+腾讯+快手offer都已拿到

33 阅读3分钟

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始,原计划每天刷一道算法题,实际上每天有时候不止一题,一年最终完成了 600+:

凭借三年刷题经验,他在校招中很快拿到了各大公司的offer。

入职前,他把他的刷题经验总结成1121页PDF书籍,作为礼物赠送给他的学弟学妹,希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书,我仔细看了一遍,作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学,作者还给出了他结合众多数据结构算法书籍,挑选出的一千多道题的解题思路和方法,以供有需要的同学慢慢研究。

开源分享:docs.qq.com/doc/DSmRnRG…

过了一个"憋"屈的五一假期,Angular权威教程的路还需要继续走啊。
let`s go。今天来简单了解一下angular的内置指令。
在这里插入图片描述

ngIf:

根据ngIf中的值来决定是否显示或不显示一个元素。
在这里插入图片描述

ngSwitch:

类似于其他语言的switch语句。

<div class="container" [ngSwitch]="myVar">   
<div \*ngSwitchCase="'A'">Var is A</div>   
<div \*ngSwitchCase="'B'">Var is B</div>   
<div \*ngSwitchDefault>Var is something else</div> 
</div> 

Default默认值,其他特殊值ngSwitchCase来处理

ngStyle:

[style.<cssproperty>]="value"的形式引入:

 <div [style.background-color]="'red'">        
  Uses fixed red background       
 </div> 

键值对形式引入:

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">         
 Uses fixed white text on blue background       
</div>

动态引入:

a.定义两个输入框:
 <div class="ui input">         
 <input type="text" name="color" value="{{color}}" #colorinput> </div> 
 
 <div class="ui input">         
 <input type="text" name="fontSize" value="{{fontSize}}" #fontinput> </div> 

b.基于输入框的值来设定字体大小:
 <div>       
 <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">         
 red text       
 </span>     
 </div> 

c.基于输入框的值来设定颜色:
 <h4 class="ui horizontal divider header">       
 ngStyle with object property from variable     
 </h4> 
 
  <div>       
   <span [ngStyle]="{color: color}">         
   {{ color }} text       </span>     
  </div> 
 
  <h4 class="ui horizontal divider header">       
  style from variable     
  </h4> 
 
  <div [style.background-color]="color" style="color: white;">       
  {{ color }} background     
  </div> 

存在疑惑:动态传输的时候的值命名和引用的名称为何不统一。
在这里插入图片描述

ngClass:

ngClass和ngStyle不同点是在于:
前者为类层次的,后者为属性层次的

括号中键值对,第一个为类名称,第二个为Boolean值:

  <div [ngClass]="{bordered: false}">This is never bordered</div>   
  <div [ngClass]="{bordered: true}">This is always bordered</div> 

动态指令:

<div [ngClass]="{bordered: isBordered}">    
 Using object literal. Border {{ isBordered ? "ON" : "OFF" }}   </div> 

ngFor :

渲染元素:

*ngFor ="let item of items"

for example:

 this.cities = ['Miami', 'Sao Paulo', 'New York']; 

 <div class="ui list" *ngFor="let c of cities">     
 <div class="item">{{ c }}</div>   

将会依次渲染出cities的每个城市。
在这里插入图片描述

最后

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】