Angularjs4.0 事件绑定机制
以下以click事件为例来说明angularjs的事件绑定机制:
一、在src/app文件夹下创建文件click-me.component.ts,代码如下:
@Component({
selector: 'click-me',
template: ` <button (click)="onClickMe()">Click me!</button>
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe() {
this.clickMessage = 'You are my hero!';
}
}
二、编辑src/app文件夹下的文件app.module.ts,将新建的组件添加进去,代码如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {ClickMeComponent} from './click-me.component';
@NgModule({
declarations: [
AppComponent,
ClickMeComponent,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
三、模板文件添加代码:
<click-me></click-me>
效果如下:
事件绑定机制在线实例:在线例子,本地例子下载:
下一篇:Angularjs4.0 表单
文章
总共 0 条评论