Angular组件传值

最新推荐文章于 2023-09-09 23:57:21 发布

酒慰风尘

最新推荐文章于 2023-09-09 23:57:21 发布

阅读量704

点赞数

分类专栏： ng

本文链接：https://blog.csdn.net/weixin_43718291/article/details/106374573

版权

本文详细介绍了Angular组件间通信的多种方法，包括：通过输入输出属性传递数据、使用局部变量获取子组件引用、利用@ViewChild装饰器以及中间人模式。无论组件是否具有父子关系，这些方法都能帮助开发者有效地实现组件间的交互。

摘要由CSDN通过智能技术生成

1、父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件
2、父组件通过局部变量获取子组件的引用
3、父组件使用@ViewChild获取子组件的引用
4、两个不相关联的组件使用中间人模式交互
5、终极大招:创建一个服务注入到组件中
6、直接把父组件当做服务注入到子组件中

一、通过输入与输出属性进行传递进行组件之间数据交互

//父组件html
<li *ngFor="let item of dataSet;let i = index">
    <span>{
   {
   item.name}}</span>----{
   {
   i+1}}--{
   {
   item.id}}
    <app-child [names]="item" (foo)="bar($event)"></app-child>
</li>
//父组件ts文件
dataSet = [
    {
   "id":0,"name":"张三"},
    {
   "id":1,"name":"李四"},
    {
   "id":2,"name":"王五"},
  ]
  bar(event