Angular(渲染及管道)

Angular

使用时, 需要安装脚手架, 利用脚手架生成项目包; 然后编写代码.
生成命令:

ng new ngpro

用法:

• 双标签的内容: { { 变量 }}
• 属性: [属性名]=“值” 或 属性名="{ { 值 }}"
• 事件: (事件名)=“方法名()”
• 双向数据绑定: [(ngModel)]=" 变量 "
– 注意:
默认不加载Form模块, 必须手动加 载 且 加载后必须重启命令行才能生效!
• 组件的使用:
– 1个组件由3个文件组成: html css ts
– 主文件为: ts. 在ts中合并 html css
– 生成命令: ng g c 组件名
• 启动命令: ng s 或 ng s -o

条件渲染

在vue中:
v-if
创建组件: myc02

ng g c myc02

<p>myc02 works!</p>

<h3>面试分数: {
  { score }}</h3>

<input type="number" [(ngModel)]="score" />

<!-- 
  在vue中: v-if
  在ng中: *ngIf  快捷提示 ng-if

  条件渲染: 满足条件的标签 会显示
 -->
<p *ngIf="score < 60">不及格</p>
<p *ngIf="score >= 60">及格</p>

<hr />
<!-- angular也存在 else 写法, 但是使用较少 -->

<!-- 快捷: ng-if-else -->
<ng-container *ngIf="score < 60; else abc">
  <p>不及格</p>
</ng-container>
<!-- #: 是ng模板中的特殊表示, 相当于 id= ;用于设定唯一标识 -->
<ng-template #abc>
  <p>及格</p>
</ng-template>

列表渲染

在vue中:
v-for="(item,index) in items" :key="index"
组件: myc03

ng g c myc03

//myc03.component.ts
import {
    Component, OnInit