Angular模板语法

1 Angular数据文本绑定

Angular 中使用{{}}绑定业务逻辑里面定义的数据
<div class="title"> {{title}}</div>

2 Angular模板里面绑定属性

[title]="student"绑定动态属性

ts:
public title: string = 'zhaoshuai-lc'
html:
<div [title]="student">
    张三
</div>

3 Angular模板里面绑定Html

ts：
public content = "<h2>i am h2</h2>"
html:
<span [innerHTML]='content' class="red"></span>

4 Angular模板里面允许做简单的运算

1+2={{1+2}}

5 数据循环 *ngFor

public arr: Array<string> = ['one', 'two', 'three', 'four']

<!--*ngFor 普通循环-->
<ul>
  <li *ngFor="let item of arr">{{item}}</li>
</ul>

  public userInfoList: Array<any> = [{
    name: 'zhaoshuai-lc',
    age: 10
  }, {
    name: 'zhaoyushuai-lc',
    age: 12
  }, {
    name: 'duanshuxian',
    age: 13
  }]
  
<ul>
  <li *ngFor="let item of userInfoList">
    {{item.name}} --- {{item.age}}
  </li>
</ul>

 public newsList: Array<any> = [
   {
     title: 'news-1'
   },
   {
     title: 'news-2'
   },
   {
     title: 'news-3'
   }
 ]

<!--循环的时候设置 key-->
<ul>
  <li *ngFor="let item of newsList; let key = index">
    {{key}} -- {{item.title}}
  </li>
</ul>

6 条件判断语句 *ngIf

<!--条件判断语句 *ngIf-->
<div *ngIf="flag">
  i am first
</div>
<div *ngIf="!flag">
  i am second
</div>

7 条件判断语句 *ngSwitch

public orderStatus: number = 10

<!--条件判断语句 *ngSwitch-->
<span [ngSwitch]="orderStatus">
  <p *ngSwitchCase="1">1</p>
  <p *ngSwitchCase="2">2</p>
  <p *ngSwitchCase="3">3</p>
  <p *ngSwitchDefault>default</p>
</span>

8 属性[ngClass]

.define-style {
  color: red;
}

.green-style {
  color: green;
}

.yellow-style {
  color: yellow;
}

<!--属性[ngClass]-->
<div class="define-style">
  ngClass演示 （尽量不要用dom来改变class）
</div>

<div [ngClass]="{ 'green-style': false, 'yellow-style': true}">
  ngClass演示
</div>

<div [ngClass]="{'green-style': flag, 'yellow-style': !flag}">
  [ngClass]演示
</div>

<strong>循环数组，让数组的第一个元素的样式为red ,第二个为orange,第三个为blue</strong>
<ul>
  <li *ngFor="let item of newsList; let key=index;"
      [ngClass]="{'green-style': key==0,'yellow-style': key==1, 'define-style': key==2}">
    {{key}}---{{item.title}}
  </li>
</ul>

9 属性[ngStyle]

public attr: string = 'green'

<!--属性[ngStyle]-->
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签</p>

10 管道

public today: any = new Date()

<!--管道-->
today: {{ today }}
<br/>
-today: {{today | date:'yyyy-MM-dd HH:mm:ss'}}

11 执行事件(click)

<button (click)="run()">执行事件</button>
<button (click)="getData()">执行方法获取属性里面的数据</button>
<div>{{ username1 }}</div>
<button (click)="setData()">执行方法改变属性里面的数据</button>

public username1: any = 'zhaoshuai-lc'

  run() {
    alert("run function")
  }

  getData() {
    alert(this.username1)
  }

  setData() {
    this.username1 = 'setData-username1'
  }

12 表单事件-事件对象

<input type="text" (keydown)="keyDown()"/>
<input type="text" (keydown)="_keyDown($event)"/>

  keyDown() {
    alert("keyDown")
  }
  _keyDown(e) {
    console.log(e.target.value)
  }

13 双向数据绑定

public keywords: string = ''
changeKeywords() {
  this.keywords = 'changeKeywords-keywords'
}

<!--双向数据绑定–MVVM 只是针对表单-->
<input type="text" [(ngModel)]='keywords' />
{{keywords}}
<button (click)="changeKeywords()">改变keywords的值</button>

14 ViewChild的用法

Angular的ViewChild用法是用来获取模板视图中的元素或组件的引用。

<app-component-module #componentModuleComponent></app-component-module>

import {Component, ViewChild} from '@angular/core';
import { ComponentModuleComponent } from './components/component-module/component-module.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'firstProject';

  public parentValue: string = 'parentValue'

  // ViewChild 组件实例调用 父调用子组件
  @ViewChild(ComponentModuleComponent) componentModuleComponent: any;
  @ViewChild('componentModuleComponent') _componentModuleComponent: any;

  // 简单来说就是当组件视图渲染完成后调用，也就是说在这个函数执行之前是没有办法获取到HTML里面的内容的
  ngAfterViewInit(): void {
    console.log(this.componentModuleComponent);
    console.log(this._componentModuleComponent);
  }


}

15 引入服务

1. 创建一个服务文件：在你的Angular项目中，使用以下命令创建一个新的服务文件。

ng g service your-service-name

这将在你的项目目录中创建一个名为your-service-name.service.ts的文件，并自动生成基本的Angular服务代码。

2. 编写服务代码：在your-service-name.service.ts文件中，你可以编写服务的方法和属性。例如，你可以定义一些用于获取数据的方法，或者创建一个用于管理用户状态的服务的属性。

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() {
  }

  set(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value))
  }

  get(key: string) {
    return localStorage.getItem(key)
  }
}

3. 使用服务：你可以在任何组件中注入服务并使用它。在组件的构造函数中，使用@Inject装饰器来注入服务。

import { Component } from '@angular/core';  
import { YourServiceNameService } from './your-service-name.service';  
  
@Component({  
  selector: 'app-your-component',  
  templateUrl: './your-component.component.html',  
  styleUrls: ['./your-component.component.css'],  
})  
export class YourComponent {  
  constructor(private yourService: YourServiceNameService) {}  
  
  // 在这里使用你的服务  
}

4. 在模板中使用服务：一旦你在组件中注入了服务，你就可以在模板中使用它。例如，你可以使用服务的方法来获取数据并在模板中显示它们。

<div *ngIf="yourService.getData()">  
  <p>{{ yourService.getData() }}</p>  
</div>