組件
創(chuàng)建
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 { /*實現(xiàn)接口*/
constructor() {
/*構造函數(shù)*/
}
ngOnInit() { /*初始化加載的生命周期函數(shù)*/ } }
綁定數(shù)據
Angular 中使用{{}}綁定業(yè)務邏輯里面定義的數(shù)據
<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>
數(shù)據循環(huán)
*ngFor 普通循環(huán)
<ul><li *ngFor="let item of list"> {{item}} </li> </ul>
//循環(huán)的時候設置 key
<ul><li *ngFor="let item of list;let i = index;"> {{item}} --{{i}} </li> </ul>
//template 循環(huán)數(shù)據
<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">已發(fā)貨</li>
<li *ngSwitchDefault>無效</li>
</ul>
執(zhí)行事件 (click)=”getData()”
<button class="button" (click)="getData()"> 點擊按鈕觸發(fā)事件 </button>
<button class="button" (click)="setData()"> 點擊按鈕設置數(shù)據 </button>
getData(){ /*自定義方法獲取數(shù)據*/ //獲取 alert(this.msg); }
setData(){ //設置值 this.msg='這是設置的值'; }
export class NewsComponent implements OnInit {
/*
聲明屬性的幾種方式：
public 共有 *（默認） 可以在這個類里面使用、也可以在類外面使用
protected 保護類型 他只有在當前類和它的子類里面可以訪問
private 私有 只有在當前類才可以訪問這個屬性
*/
//定義普通數(shù)據
public title='我是新聞組件';
msg='我是一個新聞組件的msg';
private username:string='張三';
//推薦
public student:any='我是一個學生的屬性（數(shù)據）';
public userinfo:object={
username:"張三",
age:'20'
}
public message:any;
public content="<h2>我是一個html標簽</h2>";
//定義數(shù)組
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模板里面綁定數(shù)據</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里面的數(shù)據循環(huán)</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) }
雙向數(shù)據綁定 <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、表示已經發(fā)貨 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>循環(huán)數(shù)據 顯示數(shù)據的索引（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">
表示已經發(fā)貨
</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>循環(huán)數(shù)組，讓數(shù)組的第一個元素的樣式為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()">執(zhí)行事件</button>
<button (click)="getData()">執(zhí)行方法獲取數(shù)據</button>
<button (click)="setData()">執(zhí)行方法改變屬性里面的數(shù)據</button>
<button (click)="runEvent($event)">執(zhí)行方法獲取事件對象</button>
<h1>表單事件 事件對象</h1>
<!-- <input type="text" (keydown)="keyDown()" /> -->
keyDown
<input type="text" (keydown)="keyDown($event)" />
keyUp:
<input type="text" (keyup)="keyUp($event)" />
<h1>雙休數(shù)據綁定--MVVM 只是針對表單</h1>
<input type="text" [(ngModel)]='keywords' />
{{keywords}}
<button (click)="changeKeywords()">改變keywords的值</button>
<button (click)="getKeywords()">獲取keywords的值</button>
