在 Angular 中的两个组件之间传递值

Question

我正在尝试将值从一个组件传递到其他组件，到目前为止，我已经参考了一些 tuts 并创建了我的代码，但仍然面临问题。

我的 SelectComponent.ts 中有以下代码

    export class SelectComponent implements OnInit {
 user: LoginUser
 selectLicences = [
  { name: 'Control', id: 1, isChecked: false, quantity: 1 },
  { name: 'Complete', id: 2, isChecked: false, quantity: 1 },
 ]

ControlQuantity=10
CompleteQuantity=20

我想在我的其他“buyerComponent”中访问 ControlQuantity 和 CompleteQuanitiy

这里是buyerComponent.ts

    export class BuyerComponent implements OnInit, OnDestroy,AfterViewInit {​
@ViewChild('selectProducts', {​ read: SelectComponent, static: false }​)
selectProducts: SelectComponent

CompleteQuantity:number
ControlQuantity:number
ngOnInit() {
    this.CompleteQuantity=this.selectProducts.CompleteQuantity
    this.ControlQuantity=this.selectProducts.ControlQuantitity
}
}

stackblitz 链接：https://stackblitz.com/edit/angular-ivy-umje3g?

Answer 1

可以参考官方文档。 https://angular.io/guide/inputs-outputs#sending-data-to-a-child-component

您可以通过 @Input() 装饰器将数据传递给您的子组件。

export class buyerComponent implements OnInit{
    @Input() CompleteQuantity:number
    @Input() ControlQuantity:number
    
    ngOnInit() {
        this.CompleteQuantity=this.selectProducts.CompleteQuantity
        this.ControlQuantity=this.selectProducts.ControlQuantitity
    }
}

在您的 HTML 页面中，您可以通过子组件的选择器标签传递数据。

更新：看到代码后。

• 在 AppModule 中，从 Import 中移除 BuyerComponent 和 Products 组件并将它们添加到声明数组中。

• Buyer.component.html 中的标签不正确。正确的标签是 “app-products”而不是“app-select-products”。

• 将这些添加为产品组件类中的@Input()

       @Input() CompleteQuantity:number
       @Input() ControlQuantity:number
  

• 将现有的 Output() 变量重命名为 products.component.ts 类中的另一个名称。

Answer 2

你有两种选择：

1. 您可以使用单例服务：

@Injectable({providedIn: 'root'})
export class SharedService {
  sharedValue = 1
}

@Component({…})
export class Component1 implements OnInit {
  public get prop(): number {
    return this.service.sharedValue;
  }
  constructor(private service: SharedService) { }
}

@Component({…})
export class Component2 implements OnInit {
  public get prop(): number {
    return this.service.sharedValue;
  }
  constructor(private service: SharedService) { }
}

1. 您必须将父组件用作数据桥

父级（桥组件）

请注意，父级并没有做很多事情，而是在子级之间提供共享数据之间的绑定。

<div>
  <app-child1 
    [value]="value"
    (valueUpdated)="onChangeValueFromChildren($event)">
  </app-child1>
  <app-child2 
    [value]="value"
    (valueUpdated)="onChangeValueFromChildren($event)">
  </app-child2>
</div>

@Component({…})
export class ParentComponent implements OnInit {

  value = 2
  
  onChangeValueFromChildren(newValue: number) { 
    this.value = newValue
  }
}

任何子组件

@Component({…})
export class Child1 implements OnInit {

  @Output valueUpdated = new EventEmitter<number>();
  
  onClick() { 
     this.valueUpdated.next(Math.random())
  }
}