angular - Angular 6：在 ngOnInit 中使用 @Input 的值

Question

我想通过输入来检索模型车的值，但我不确定它是如何工作的。这是我尝试过的。

@Input() model : Car
car: Car;

    ngOnInit() {
        this.car= this.carService.getcar(model.id);
      }

不幸的是，模型总是空的。我该怎么办？

编辑：父 HTML

 <app-model
        [model]="car">
  </app-model>

父 ts 文件

ngOnInit{
  this.shopService.get()
        .pipe(
          take(1),
          finalize(() => {
                    })
              )
         .subscribe(result => {
              this.car = result;
              });
          })
        )
 }

Answer 1

modelcar是空的，因为父组件中的变量ngOnInit是在子组件中调用之后分配的。您需要调用 in 的方法carService，ngOnChanges而不是ngOnInit。

@Input() model: Car
car: Car;

ngOnChanges() {
  this.car = this.carService.getcar(model.id);
}

Answer 2

你必须使用@Input()（带括号）

Answer 3

在另一个组件的 HTML 中

<app-detail-component [model]="{id: 1, name: 'Carname'}"></app-detail-component>

在您描述的组件的 .ts 文件中（我假设组件的名称是 DetailComponent.ts）

@Input() model: Car;
car: Car;

ngOnInit() {
     this.car= this.carService.getcar(model.id);
}

官方文档链接： https ://angular.io/guide/component-interaction