Angular：如何在打字稿文件中使用父组件的输入值

Posted 2023-02-23

【中文标题】Angular：如何在打字稿文件中使用父组件的输入值

【英文标题】：Angular: How to use Input value from parent component in typescript file

【发布时间】：2020-01-04 03:43:19

【问题描述】：

在将@Input()items 传递给child-component.html 之前，如何使用/操作child-component.ts 中的@Input()items？如果控制台登录ngOnInit

，我会得到空对象

child-component.ts

  @Input()items: any[] = [];

parent.component.html

<child-component [items]="items"></child-component>

parent.component.ts

  indexOrders() 
    this.orderService
      .indexOrders()
      .subscribe(
        (res) => 
        this.items = res;
        ,
        (err) => 
          serviceHttpErrorHandler(err);
        ,
      );
  

sample.json

传递给 this.item 的示例响应

[
   
      "text":"wood",
      "value":"100"
   ,
   
      "text":"chair",
      "value":"200"
   ,
   
      "text":"board",
      "value":"300"
   
]

【问题讨论】：

parent.component.html 应该是 <child-component [items]="items"></child-component> 并在 items 属性周围加上括号。

你遇到了什么错误？

@JasonWhite，实际上它在实际应用中是带括号的。抱歉，创建此问题时没有注意到。在传递给 html 之前，你知道如何在 child-component.ts 文件中使用items 吗？

@JasonWhite，没有错误，但我得到的是空对象

您的意思是要在子组件中的项目在模板中呈现之前对其进行修改？

【参考方案1】：

   //Create and Observable
   $items: Observable<any>;

   indexOrders() 
         this.$items= this.orderService
          .indexOrders()
          .pipe(
             //do whatever you want to do here to modify the data,
             catchError(error)
          );
      

HTML

   <child-component [items]="$items | async"></child-component>

async 管道将为您执行 subcription 和 unsubscription。这样，如果您使用.subscribe()，就不必销毁订阅

https://blog.angularindepth.com/reading-the-rxjs-6-sources-map-and-pipe-94d51fec71c2

https://www.learnrxjs.io/operators/error_handling/catch.html

看看 RxJS 的 async 管道和 管道。人们在现实世界中一直使用它们。 Angular 是关于反应式编程的。

【参考方案2】：

您还可以在 setter 方法上使用 @Input() 而不仅仅是类成员变量。您将@Input() 添加到方法中，修改值，然后将其分配给成员变量。

child.component.ts

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
)
export class ChildComponent implements OnInit 

  
  _items: any;

  constructor()  

  ngOnInit() 
  

  @Input()
  public set items(items:any) 
  
    // YOU CAN MODIFY THE ITEMS HERE
    // BEFORE ASSIGNING TO _items

    this._items = items;
  

下面是一个 stackblitz 示例以及 Angular 文档。

https://stackblitz.com/edit/angular-rqqn2j

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

【讨论】：

为什么人们宁愿这样做而不是使用 RxJS 的 .pipe 进行修改？这样，当订阅发生时，数据就是你想要的。

@PatricioVargas 使用订单项目的示例，您可能希望在子组件中显示数据之前生成总计或小计。您可以通过@Input() 接收数据并进行计算。如果您只是在结构上修改数据，那么pipe 可能是更好的选择。

您仍然可以使用pipe() 实现返回总计小计，RxJS 有map()、reduce() 等可以帮助您实现这一目标。