组件
创建
ng g component components/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 中使用{{}}绑定业务逻辑里面定义的数据
{{title}}
1+1={{1+1}}
绑定html
this.h="这是一个 h2 用[innerHTML]来解析
"
绑定属性
调试工具看看我的属性
数据循环
*ngFor 普通循环
- {{item}}
//循环的时候设置 key
- {{item}} --{{i}}
//template 循环数据
- {{item}}
条件判断 *ngIf
这是 ngIF 判断是否显示
这是 ngIF 判断是否显示
*ngSwitch
- 已支付
- 订单已经确认
- 已发货
- 无效
执行事件 (click)=”getData()”
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="我是一个html标签
";
//定义数组
public arr=['1111','2222','33333'];
//推荐
public list:any[]=['我是第一个新闻',222222222222,'我是第三个新闻'];
public items:Array=['我是第一个新闻','我是第二个新闻']
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() {}
}
// 页面使用
angualr模板里面绑定数据
{{title}}
{{msg}}
{{username}}
{{student}}
{{userinfo.username}}
{{message}}
angualr模板里面绑定属性
鼠标瞄上去看一下
张三
angualr模板里面绑定Html
{{content}}
angualr模板里面允许做简单的运算
1+2={{1+2}}
angualr里面的数据循环
-
{{item}}
-
{{item}}
-
{{item}}
-
{{item.username}}---{{item.age}}
-
{{item.cate}}
-
{{car.title}}---{{car.price}}
表单事件
keyUpFn(e){ console.log(e) }
双向数据绑定
注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ AppComponent, HeaderComponent, FooterComponent, NewsComponent ],
imports: [ BrowserModule, FormsModule ],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }
- 使用
{{inputValue}}
[ngClass]、[ngStyle]
这是一个 div
public flag=false;
这是一个 div
public arr = [1, 3, 4, 5, 6];
-
{{item}}
你好 ngStyle
public attr='red';
你好 ngStyle
管道
public today=new Date();
{{today | date:'yyyy-MM-dd HH:mm:ss' }}
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页面
引入图片
![]()
循环数据 显示数据的索引（key）
-
{{key}}---{{item.title}}
条件判断语句 *ngIf
-
{{key}}---{{item.title}}
{{key}}---{{item.title}}
条件判断语句 *ngSwitch
表示已经支付
支付并且确认订单
表示已经发货
表示已经收货
无效订单
属性[ngClass]、[ngStyle]
ngClass演示 （尽量不要用dom来改变class）
ngClass演示
ngClass演示
循环数组，让数组的第一个元素的样式为red ,第二个为orange
-
{{key}}---{{item.title}}
我是一个p标签
我是一个p标签
我是一个p标签
管道
{{today | date:'yyyy-MM-dd HH:mm ss'}}
事件
{{title}}
表单事件 事件对象
keyDown
keyUp:
双休数据绑定--MVVM 只是针对表单
{{keywords}}