[英]Passing Values between two components in Angular
I am trying to pass values from one component to other components, so far i have refereed some tuts and created my code but still facing issue.我正在尝试将值从一个组件传递到其他组件,到目前为止,我已经引用了一些 tuts 并创建了我的代码,但仍然面临问题。
I have following code in my SelectComponent.ts我的 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
i want to access ControlQuantity and CompleteQuanitiy in my other "buyerComponent"我想在我的另一个“buyerComponent”中访问 ControlQuantity 和 CompleteQuanitiy
here is buyerComponent.ts这是 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 link: https://stackblitz.com/edit/angular-ivy-umje3g ? stackblitz 链接: https://stackblitz.com/edit/angular-ivy-umje3g ?
You have two alternatives:您有两种选择:
@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) { }
}
The parent (bridge component)父级(桥梁组件)
Note that the parent is not doing a lot of stuff but providing bindings between the shared data between children.请注意,父母并没有做很多事情,而是提供了孩子之间共享数据之间的绑定。
<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
}
}
Any of the children components任何子组件
@Component({…})
export class Child1 implements OnInit {
@Output valueUpdated = new EventEmitter<number>();
onClick() {
this.valueUpdated.next(Math.random())
}
}
You can refer to the official documentation.可以参考官方文档。 https://angular.io/guide/inputs-outputs#sending-data-to-a-child-component
https://angular.io/guide/inputs-outputs#sending-data-to-a-child-component
You can pass data to your child component via @Input() decorator.您可以通过 @Input() 装饰器将数据传递给您的子组件。
export class buyerComponent implements OnInit{
@Input() CompleteQuantity:number
@Input() ControlQuantity:number
ngOnInit() {
this.CompleteQuantity=this.selectProducts.CompleteQuantity
this.ControlQuantity=this.selectProducts.ControlQuantitity
}
}
In your HTML page, you can pass data via the child component's selector tag.在您的 HTML 页面中,您可以通过子组件的选择器标记传递数据。
Update: After seeing the code.更新:看到代码后。
In AppModule, remove the BuyerComponent and Products components from Import and add them to the declaration array.在 AppModule 中,从 Import 中移除 BuyerComponent 和 Products 组件并将它们添加到声明数组中。
In Buyer.component.html the tag is incorrect.在 Buyer.component.html 标签不正确。 Correct tag is "app-products" instead of "app-select-products".
正确的标签是“app-products”而不是“app-select-products”。
Add these as @Input() in the products component class在产品组件中将这些添加为 @Input() class
@Input() CompleteQuantity:number @Input() ControlQuantity:number
Rename the existing Output() variables to another name in the products.component.ts class.将现有的 Output() 变量重命名为 products.component.ts 中的另一个名称 class。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.