Angular的数据绑定通过使用花括号{{}}和方括号[]来实现。下面是一些示例代码来说明数据绑定的不同用法:
// 在组件类中定义一个变量
export class AppComponent {
name = 'John Doe';
}
// 在模板中使用单向数据绑定
Hello, {{ name }}
在上面的示例中,变量name的值被绑定到模板中的h1标签中,这样在页面上显示的内容将是"Hello, John Doe"。
// 在组件类中定义一个变量
export class AppComponent {
name = 'John Doe';
}
// 在模板中使用双向数据绑定
Your name is: {{ name }}
在上面的示例中,变量name的值被绑定到模板中的input元素,并且通过双向数据绑定,input元素中输入的值也会更新到变量name中。
// 在组件类中定义一个方法
export class AppComponent {
onClick() {
console.log('Button clicked!');
}
}
// 在模板中使用事件绑定
在上面的示例中,当按钮被点击时,onClick方法会被调用,同时会打印一条消息到控制台。
这些都是Angular中数据绑定的一些常见用法。根据具体的需求,可以使用不同的数据绑定方式来实现数据和视图之间的交互。
上一篇:Angular 刷新令牌拦截器
下一篇:Angular 数据访问模式