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 引入服务
- 创建一个服务文件：在你的Angular项目中，使用以下命令创建一个新的服务文件。
ng g service your-service-name
这将在你的项目目录中创建一个名为your-service-name.service.ts的文件，并自动生成基本的Angular服务代码。
- 编写服务代码：在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)
}
}
- 使用服务：你可以在任何组件中注入服务并使用它。在组件的构造函数中，使用@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) {}
// 在这里使用你的服务
}
- 在模板中使用服务：一旦你在组件中注入了服务，你就可以在模板中使用它。例如，你可以使用服务的方法来获取数据并在模板中显示它们。
<div *ngIf="yourService.getData()">
<p>{{ yourService.getData() }}</p>
</div>
