绑定数据_【Angular】组件的数据绑定、事件绑定和属性绑定

组件的数据绑定

Angular 支持双向数据绑定，Angular 中使用{{}}绑定业务逻辑里面定义的数据。

在app.component.html中：

<h1>
   
  {{ msg }}
 
h1>

app.component.ts中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  msg = '欢迎来到码上加油站';
}

运行项目：

组件的事件绑定

在app.component.html中：

<h1>
   
  {{ msg }}
  <br/>
  <button (click)="run()">执行事件button>
h1>

<router-outlet>router-outlet>

在app.component.ts中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  msg = '欢迎来到码上加油站';
  run(){
    alert('这是一个自定义事件方法')
  }
}

运行项目后，点击按钮：

组件绑定属性

在app.component.html中：

<h1>
   
  {{ msg }}
  <br/>

  <button (click)="run()">执行事件button>

  <div [title] = "msg"> 鼠标放在我身上看看效果div>
h1>

<router-outlet>router-outlet>

在app.component.ts中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  msg = '欢迎来到码上加油站';
  run(){
    alert('这是一个自定义事件方法')
  }
}

运行项目，鼠标移动看效果：

完

  码上加油站

  一起来加油

长按扫码关注

记得点个 赞 和 在看 哦！