Conceptos básicos de Angualr

Uno, crea y usa el componente angularr

//创建组件
ng g component components/home
//使用组件
<app-home></app-home>

Dos, datos de enlaces angulares

2. Enlace de texto de datos

使用{
   
   {}}符合，如：
<h1>
{
   
   {title}}
</h1>
<div>
1+1={
   
   {1+1}}
</div>

2. Enlazar HTML

//ts文件里定义

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

//页面调用h

<div [innerHTML]="h"></div>

3. Atributos vinculantes

<div [id]="id" [title]="msg">测试</div>

Tres, bucle de datos * ngFor

1. * ng Para bucle normal

<ul>
    <li *ngFor="let item of list">
        {
   
   {item}}
    </li>
</ul>

2. Configure la clave al realizar un bucle

<ul>
    <li *ngFor="let item of list;let i = index;">
        {
   
   {item}} --{
   
   {i}}
    </li>
</ul>

3. Datos de bucle de plantilla

<ul>
    <li template="ngFor let item of list">
        {
   
   {item}}
    </li>
</ul>

Cuatro, juicio condicional * ngSi

<p *ngIf="flag">这是 ngIF 判断是否为true，为true显示，否则不显示</p>
或
<p template="ngIf flag">这是 ngIF 判断是否为true，为true显示，否则不显示</p>

Cinco, * ngSwitch

<ul [ngSwitch]="info">
    <li *ngSwitchCase="1">已支付</li>
    <li *ngSwitchCase="2">订单已经确认</li>
    <li *ngSwitchCase="3">已发货</li>
    <li *ngSwitchDefault>无效</li>
</ul>

6. Evento de ejecución (clic) = "getData ()"

//HTML页面写
<button class="button" (click)="getData()">点击按钮触发事件</button>
<button class="button" (click)="setData()">点击按钮设置数据</button>
//ts文件里写
getData(){ /*自定义方法获取数据*/
    //获取
    alert(this.msg);
}
setData(){
    //设置值
    this.msg='这是设置的值';
}

Siete, eventos de forma

//HTML页面
<input type="text" (keyup)="keyUpFn($event)"/>
//ts 文件
keyUpFn(e){
    console.log(e)
}

Enlace de datos bidireccional de ocho

El enlace de datos bidireccional debe introducirse en el archivo app.module.ts

// app.module.ts文件
import { FormsModule } from '@angular/forms';
// 引入模组
imports: [
    BrowserModule,
    FormsModule
]
// HTML文件
<input type="text" [(ngModel)]="inputValue"/>
{
   
   {inputValue}}

Nueve, [ngClass], [ngStyle]

[ngClass]:
    <div [ngClass]="{'red': true, 'blue': false}">
        这是一个 div
    </div>
    public flag=false;
    <div [ngClass]="{'red': flag, 'blue': !flag}">
        这是一个 div
    </div>
    public arr = [1, 3, 4, 5, 6];
    <ul>
        <li *ngFor="let item of arr, let i = index">
            <span [ngClass]="{'red': i==0}">{
   
   {item}}</span>
        </li>
    </ul>
[ngStyle]:
    <div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
        public attr='red';
    <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

10. Pipeline

public today=new Date();
<p>{
   
   {today | date:'yyyy-MM-dd HH:mm:ss' }}</p>