双向绑定

约 246 字小于 1 分钟

2026-09-17

组件的双向绑定

我们在上一节学习了子父组件如何进行数据传递，但是这样需要写很多模板代码，我们应该使用 model 来实现数据的双向绑定。

/src/app/app.ts

import { Component, signal } from '@angular/core'

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  template: `
                            <!-- 这里就需要注意,这里不需要把signal的值取出来, 而是把这个signal给传递进去 -->
    <ChildComponent [(value)]="parentValue" />
  `,
})
export class AppComponent {
  parentValue = signal('123')
}

/src/child/child.ts

import { Component, model } from '@angular/core'
@Component({
  selector: 'child-component',
  styleUrl: './child.css',
  templateUrl: './child.html',
})
export class ChildComponent {
  value = model<string>('')

  // 如果这个接收的值是必选的, 那么就需要在 model 的后面加上 .required
  value2 = model.required<string>('')
}

标签的双向绑定

比如像 vue 里的 v-model，我们在 angular 中也可以实现类似的功能。

不过需要先在组件中导入 FormsModule，然后在 @Component 中的 imports 中注册。

<!--                使用 ngModel 实现双向绑定 -->
<input type="text" [(ngModel)]="value" />