Rumah > hujung hadapan web > tutorial js > 浅谈Angular中父子组件间怎么传递数据

浅谈Angular中父子组件间怎么传递数据

青灯夜游
Lepaskan: 2021-06-15 10:30:23
ke hadapan
2260 orang telah melayarinya

本篇文章给大家介绍一下Angular中父子组件间传递数据的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

浅谈Angular中父子组件间怎么传递数据

环境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. 摘要

组件之间传递数据,最主要的就是父子组件之间传递数据, 例如:

<parent-component>
  <child-component></child-component>
</parent-component>
Salin selepas log masuk

父组件传入数据给子组件,同时,子组件数据发生变化是,希望能够通知父组件。

Angular 中,@Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。 @Input() 允许父组件更新子组件中的数据。相反,@Output() 允许子组件向父组件发送数据。【相关教程推荐:《angular教程》】

2. 父传子 @Input()

2.1. 子组件定义@Input()

子组件中的 @Input() 装饰器表示该属性可以从其父组件中获取值。

例如:

export class ChildComponent {
  @Input() message: string;
}
Salin selepas log masuk

1、增加@Input() 装饰器的变量,除了数据可以从父组件传入后,其他逻辑和普通变量一致;

2、子组件的html代码中,既可使用message这个变量, 例如:

<p>
  Parent says: {{message}}
</p>
Salin selepas log masuk

2.2. 父组件传递变量给子组件

当父组件调用子组件时,可以把父组件的变量(如messageToChild) 传递给子组件

<child-component [message]="messageToChild"></child-component>
Salin selepas log masuk

子组件中,可以更改message这个传入的变量,但是其作用域只在子组件中,父组件拿不到更改后的结果。(如何传给父组件,请接着看)

3. 子传父 @Output()

Angular通过事件(Event)来实现子组件通知父组件数据的改变,父组件需要订阅该事件。

3.1. 子组件定义@Output

子组件定义@Output

export class ChildComponent {

  // EventEmitter ,这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器,它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}
Salin selepas log masuk

子组件当数据发生变化时,调用这个addNewItem方法既可。例如,html中

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>
Salin selepas log masuk

3.2. 父组件订阅事件

1、父组件的ts代码中,增加一个处理上面事件的方法,例如

addItem(newItem: string) {
    // logic here
}
Salin selepas log masuk

2、父组件的html中,订阅该事件。

<child-component (newItemEvent)="addItem($event)"></child-component>
Salin selepas log masuk

事件绑定 (newItemEvent)='addItem($event)' 会把子组件中的 newItemEvent 事件连接到父组件的 addItem() 方法。

4. 总结

  • 使用@Input() 和 @Output() 可以很方便的实现父子组件之间的数据传递、共享。

  • 可以同时使用 @Input() 和 @Output()

更多编程相关知识,请访问:编程入门!!

Atas ialah kandungan terperinci 浅谈Angular中父子组件间怎么传递数据. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan