Angular：如何在 typescript 文件中使用来自 parent 组件的输入值

Question

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

，我会变空 object

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

sample response that passed to this.item

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

Answer 1

您还可以在 setter 方法上使用 @Input() 而不仅仅是 class 成员变量。您将 @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

Answer 2

   //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 管道将为您执行 subscription 和 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 管道和 pipe。人们在现实世界中一直在使用它们。 Angular 都是关于反应式编程的。

Angular：如何在 typescript 文件中使用来自 parent 组件的输入值

Angular: How to use Input value from parent component in typescript file

decorator

angular-components

angular

angular-input

child.component.ts