angular.js概念理解

原创于 2019-12-11 11:05:39 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Angular框架中核心的指令与组件概念，包括结构型指令如何刷新DOM元素，*ngFor循环遍历，*ngIf条件渲染，以及属性绑定和事件绑定的语法。同时，介绍了组件的定义方式及其组成部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、*结构型指令，会重新刷新dom元素，新增、删除、操作

2、*ngFor=“let app of apps”

3、{{ }}插值语法，将里面的值作为文本显示

4、[]属性绑定语法，将一些值绑定到标签上

5、可以使用*ngIf 仅创建有该属性的标签

6、()事件绑定，绑定button元素的click事件，通过把事件用()包起来

eg：

<div *ngFor="let p of ps">
  <h4>
    <a [title] = "p.name + 'des'">
       {{p.name}}  
    </a>
    <p *ngIf="product.description">
      descri:{{product.description}}
    </p>
    <button (click)="share()">
       share
    </button>
  </h4>
</div>

html css ts

@Component：该类为组件，有三个属性selector为angular组件名，以app开头、templateUrl模板html、styleUrls样式

export class表示该组件的功能