Question

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

@Input() model : Car
car: Car;

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

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

编辑：父HTML

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

PARENT ts文件

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

Answer 1

您必须使用@Input()（带有方括号）

Answer 2

在另一个组件的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

Answer 3

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

@Input() model: Car
car: Car;

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

角度6：在ngOnInit中使用@Input的值

3 个答案: