组件
创建
ng g component components/header
使用组件
<app-header></app-header>
import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/ @Component({
selector: 'app-header', /*使用这个组件的名称*/
templateUrl: './header.component.html', /*html 模板*/
styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
constructor() {
/*构造函数*/
}
ngOnInit() { /*初始化加载的生命周期函数*/ } }
绑定数据
Angular 中使用{{}}绑定业务逻辑里面定义的数据
<h1>{{title}} </h1>
<div>1+1={{1+1}} </div>
绑定html
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
<div [innerHTML]="h"></div>
绑定属性
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
数据循环
*ngFor 普通循环
<ul><li *ngFor="let item of list"> {{item}} </li> </ul>
//循环的时候设置 key
<ul><li *ngFor="let item of list;let i = index;"> {{item}} --{{i}} </li> </ul>
//template 循环数据
<ul><li template="ngFor let item of list"> {{item}} </li> </ul>
条件判断 *ngIf
<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
*ngSwitch
<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>
执行事件 (click)=”getData()”
<button class="button" (click)="getData()"> 点击按钮触发事件 </button>
<button class="button" (click)="setData()"> 点击按钮设置数据 </button>
getData(){ /*自定义方法获取数据*/ //获取 alert(this.msg); }
setData(){ //设置值 this.msg='这是设置的值'; }
export class NewsComponent implements OnInit {
/*
声明属性的几种方式：
public 共有 *（默认） 可以在这个类里面使用、也可以在类外面使用
protected 保护类型 他只有在当前类和它的子类里面可以访问
private 私有 只有在当前类才可以访问这个属性
*/
//定义普通数据
public title='我是新闻组件';
msg='我是一个新闻组件的msg';
private username:string='张三';
//推荐
public student:any='我是一个学生的属性（数据）';
public userinfo:object={
username:"张三",
age:'20'
}
public message:any;
public content="<h2>我是一个html标签</h2>";
//定义数组
public arr=['1111','2222','33333'];
//推荐
public list:any[]=['我是第一个新闻',222222222222,'我是第三个新闻'];
public items:Array<string>=['我是第一个新闻','我是第二个新闻']
public userlist:any[]=[{
username:'张三',
age:20
},{
username:'李四',
age:21
},
{
username:'王五',
age:40
}];
public cars:any[]=[
{
cate:"宝马",
list:[
{
title:'宝马x1',
price:'30万'
},
{
title:'宝马x2',
price:'30万'
},
{
title:'宝马x3',
price:'40万'
}
]
},
{
cate:"奥迪",
list:[
{
title:'奥迪q1',
price:'40万'
},
{
title:'奥迪q2',
price:'40万'
},
{
title:'奥迪q3',
price:'30万'
}
]
}
]
constructor() {
this.message='这是给属性赋值--（改变属性的值）';
//获取属性的值
console.log(this.msg);
//改变属性的值
this.msg="我是改变后的msg的值";
}
ngOnInit() {}
}
// 页面使用
<h1>angualr模板里面绑定数据</h1>
<h2>{{title}}</h2>
<h3>{{msg}}</h3>
<h4>{{username}}</h4>
<h5>{{student}}</h5>
<hr />
<h6>{{userinfo.username}}</h6>
<div>
{{message}}
</div>
<hr />
<h1>angualr模板里面绑定属性</h1>
<div title="我是一个div">
鼠标瞄上去看一下
</div>
<br>
<div [title]="student">
张三
</div>
<hr />
<h1>angualr模板里面绑定Html</h1>
<div>
{{content}}
</div>
<br>
<span [innerHTML]='content' class="red"></span>
<hr />
<h1>angualr模板里面允许做简单的运算</h1>
1+2={{1+2}}
<hr />
<h1>angualr里面的数据循环</h1>
<ul>
<li *ngFor="let item of arr">
{{item}}
</li>
</ul>
<br>
<ol>
<li *ngFor="let item of list">
{{item}}
</li>
</ol>
<br>
<ol>
<li *ngFor="let item of items">
{{item}}
</li>
</ol>
<br>
<ul>
<li *ngFor="let item of userlist">
{{item.username}}---{{item.age}}
</li>
</ul>
<br>
<ul>
<li *ngFor="let item of cars">
<h2>{{item.cate}}</h2>
<ol>
<li *ngFor="let car of item.list">
{{car.title}}---{{car.price}}
</li>
</ol>
</li>
</ul>
表单事件
<input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){ console.log(e) }
双向数据绑定 <input [(ngModel)]="inputValue">
注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ AppComponent, HeaderComponent, FooterComponent, NewsComponent ],
imports: [ BrowserModule, FormsModule ],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }
- 使用
<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}
[ngClass]、[ngStyle]
<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>
<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
public attr='red';
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
管道
public today=new Date();
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
export class HomeComponent implements OnInit {
public title:string='我是一个title';
public
picUrl='https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6d a1ec.png';
public list:any[]=[
{
"title":'我是新闻1'
},
{
"title":'我是新闻2'
},
{
"title":'我是新闻3'
}
];
public flag:boolean=true;
public orderStatus:number=3;
/* 1表示已经支付 2支付并且确认订单 3、表示已经发货 4表示已经收货 其他、无效*/
public attr:string='orange';
public today:any=new Date();
public keywords:string='这是默认值';
constructor() {
console.log(this.today);
}
ngOnInit() {
}
run(){
alert('这是一个自定义方法')
}
getData(){
alert(this.title);
}
setData(){
this.title='我是一个改变后的title';
}
runEvent(event){
//ionic必须这样写
let dom:any=event.target;
dom.style.color="red";
}
keyDown(e){
if(e.keyCode==13){
console.log('按了一下回车')
}else{
//e.target 获取dom对象
console.log(e.target.value);
}
}
keyUp(e){
if(e.keyCode==13){
console.log(e.target.value);
console.log('按了一下回车');
}
}
changeKeywords(){
this.keywords='我是改变后的值';
}
getKeywords(){
console.log(this.keywords)
}
}
//html页面
<h1>引入图片</h1>
<img src="assets/images/02.png" alt="收藏" />
<img [src]="picUrl" />
<h1>循环数据 显示数据的索引（key）</h1>
<ul>
<li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
<h1>条件判断语句 *ngIf</h1>
<div *ngIf="flag">
<img src="assets/images/02.png" />
</div>
<div *ngIf="!flag">
<img src="assets/images/01.png" />
</div>
<ul>
<li *ngFor="let item of list;let key=index;">
<span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
<span *ngIf="key!=1">{{key}}---{{item.title}}</span>
</li>
</ul>
<h1>条件判断语句 *ngSwitch</h1>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
表示已经支付
</p>
<p *ngSwitchCase="2">
支付并且确认订单
</p>
<p *ngSwitchCase="3">
表示已经发货
</p>
<p *ngSwitchCase="4">
表示已经收货
</p>
<p *ngSwitchDefault>
无效订单
</p>
</span>
<h1>属性[ngClass]、[ngStyle]</h1>
<div class="red">
ngClass演示 （尽量不要用dom来改变class）
</div>
<div [ngClass]="{'blue':true,'red':false}">
ngClass演示
</div>
<hr>
<div [ngClass]="{'orange':flag,'red':!flag}">
ngClass演示
</div>
<strong>循环数组，让数组的第一个元素的样式为red ,第二个为orange</strong>
<ul>
<li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">
{{key}}---{{item.title}}
</li>
</ul>
<hr>
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签 </p>
<br>
<h1>管道</h1>
{{today | date:'yyyy-MM-dd HH:mm ss'}}
<h1>事件</h1>
<strong>{{title}}</strong>
<button (click)="run()">执行事件</button>
<button (click)="getData()">执行方法获取数据</button>
<button (click)="setData()">执行方法改变属性里面的数据</button>
<button (click)="runEvent($event)">执行方法获取事件对象</button>
<h1>表单事件 事件对象</h1>
<!-- <input type="text" (keydown)="keyDown()" /> -->
keyDown
<input type="text" (keydown)="keyDown($event)" />
keyUp:
<input type="text" (keyup)="keyUp($event)" />
<h1>双休数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]='keywords' />
{{keywords}}
<button (click)="changeKeywords()">改变keywords的值</button>
<button (click)="getKeywords()">获取keywords的值</button>
