angular学习2-模板与绑定

最新推荐文章于 2024-11-27 18:59:35 发布

转载最新推荐文章于 2024-11-27 18:59:35 发布 · 189 阅读

文章标签：

#angular

angular 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Angular2中的数据绑定技术，包括单向绑定、双向绑定、属性绑定、类绑定和样式绑定等，并展示了如何使用事件绑定进行交互，以及如何利用模板引用变量增强组件之间的通讯。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法

在angular2中:

单向绑定：从看到的目标绑定数据来源
（target) = “statement”
单向绑定：从数据来源绑定到目标：
{{expression}}
[target] = “expression”
bind-target = “expression”
双向绑定: 数据来源与视觉端相互绑定：
[(target)] = “expression”

属性绑定(attribute binding):

<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">
<span [attr.colspan] = "1+1"></span>

类绑定(class binding):

<div [class.special] = "isSpecial"></div>
//ngClass管理多个类
currentClass = {
'savable':false,
'modified':true,
'special':false
}
<div [ngClass] = "currentClass"></div>

样式绑定(style binding):

 currentStyles= {
    'font-style':this.canSave ? 'italic':'normal',
    'font-weight':this.inUnchanged? 'bold':'normal',
    'font-size':this.isSpecial?'24px':'12px'
  }
  
<button [style.color]="isSpecial:'red':'green'"></button>
<button [style.background-color]="canSave?'cyan':'grey'"></button>
<button [ngStyle]="currentStyles"></button>

双向绑定

src/app/app.module.ts
import {FormsModule} from '@angular/forms'

@NgModule({
imports:[
	FormsModule
]
})

src/app/app.component.ts
<input [(ngModel)] = "user.name">

事件绑定(event binding):

template:

<button (click)="onSave()"></button>

Component:

@Component({
	...
})
export class AppComponent{
	onSave():void{
		...
	}
}

又比如：

//template
<input (input)="getValue($event)"/>
//component
export class LearnComponent{
getValue($event){
console.log($event.target.value)
}
}

$event是DOM标准事件对象，target是每个DOM标准事件对象都有的属性，在这里就是input元素。但是这种方法让组件知道了太多模板信息。所以还有更好的做法。

模板引用：

//template
<input #box (input)="keyup(0)"/> //必须绑定一个事件
<p>{{box.value}}</p>
export class LearnComponent{}

//还可以这样
<input #box (keyup.enter)="onEnter(box.value)"/>
<p>{{value}}</p?
//component
export class LearnComponent{
	value:""
	onEnter(value:string){
		this.value = value
	}
}

条件绑定，循环绑定：

//template
<ul>
  <li *ngFor="let hero of Heroes">{{hero}</li>
</ul>
//Component
Heroes = ['wind','rain','superman']

//template
<div class="showme" *ngIf="isShow">show</div> 
//component
isShow:boolean = false

模板引用变量(#var):

<input type="text" #phone placeholder="phonenumber">
<button (click)="callPhone(phone.value)"></button>

输入属性@Input:

输入属性是一个带有@Input装饰器的属性。当他通过属性绑定的形式被绑定时，值会流入这个属性。与vue,react中的props属性用法类似。

//Component
import {Input} from '@angular/input'
@Component({})
export class LearnComponent{
	@Input() name:string
}
//在另一个component中引入上面的组件
<app-learn [name]="superman"></app-learn> //superman流入到learncomponent的name属性当中

输出属性@Output:

输出属性是一个带有@Output装饰器的属性。这个属性几乎总是返回angular的EventEmitter。
当它通过事件绑定的形式被绑定时，值会“流出”这个属性。
类似于vue中的事件中通过emit向上级分发事件。

//Component
import {Output,Component} from '@angular/core'
@Component({})
export class LearnComponent{
@Output() sendMessage= new EventEmitter()
handleClick(){
	this.sendMessage.emit('Hello World')
	}
}
//template
<button (click)="handleClick()">sendMessage</button>

//另一个Component
import {Component} from '@angular/core'
@Component({})
export class OtherComponent{
getMessage($event){
	console.log($event)
}
}
//另一个template
<app-learn (sendMessage)="getMessage($event)"></app-learn> //数据必须在$event中接收