在我的应用程序中，我需要根据父组件值将视图从一个组件更改为另一个组件。
查看结构
<app-component>
<app-common></app-common>
</app-component>
在这里，我将公共组件称为app组件的子组件。
<app-common>
<app-grid></app-grid>
</app-common>
这里我将网格组件作为公共组件的子组件
common.html
<div class="accordion col-sm-12" id="accordion1" *ngFor='let data of dropdownData; let i=index'>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle h6" (click)="getCategory(categorycode.value)" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo + i">
{{data?.CAMD_ENTITY_DESC}}
<input type="hidden" #categorycode value="{{data?.PROD_PRCATG_CODE}}">
</a>
</div>
<div *ngFor='let group of data.group; let j=index' id="collapseTwo + i" class="accordion-body collapse" style="margin-left:10px">
<div class="accordion-inner">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" (click)="getGroup(groupcode.value)" data-toggle="collapse" data-parent="#accordion2" [href]="'#collapseInnerTwo' + j">
{{group?.CAMD_PRGRP_DESC}}
<input type="hidden" #groupcode value="{{group?.PROD_PRGRP_CODE}}">
</a>
</div>
<div [id]="'collapseInnerTwo' + j" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">
<div class="accordion-inner" style="cursor: pointer;" (click)="getSubgruop(subgroupcode.value)" *ngFor='let subgroup of group?.subgroup; let i=index'>
{{subgroup?.CAMD_PRSGRP_DESC}}
<input type="hidden" #subgroupcode value="{{subgroup?.PROD_PRSGRP_CODE}}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<app-grid></app-grid>
这是一个来自这个用户的手风琴可以选择类别，组，subgruop等选项，所以每个用户选择网格组件中需要的值来显示视图（API调用将从网格组件中的db获取每个选定值的数据）当用户选择选项时动态地动态。
common.component.ts
export class CommonComponent {
categorycode :string ='';
groupcode :string= '';
subgroupcode:string='';
constructor(private router: Router, private CartdataService: CartdataService) { }
ngOnInit() {}
public getCategory(categorycode){
this.CartdataService.get_Category_Code(categorycode);
}
public getGroup(groupcode){
this.CartdataService.get_Group_Code(groupcode);
}
public getSubgruop(subgroupcode){
this.CartdataService.get_Group_Code(subgroupcode);
}
}
grid.component.ts
export class GridComponent {
@Input() C_code: string;
@Input() G_code: string;
@Input() SG_code: string;
products: any;
constructor(private CartdataService: CartdataService, private router: Router) {
this.router.events.subscribe(
() => window.scrollTo(0, 0));
}
ngOnInit() {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
});
}
ngOnChanges(change: SimpleChange) {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
});
}
}
grid.html
<div class="row">
<div class="col-sm-4 column" *ngFor="let product of products;let i =index;">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image">
<img routerLink="/my-cart" class="img-fluid two" [src]="product['IMAGE_PATH_2']" alt="image">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>{{product?.ITEM_DESCRIPTION}}</span>
<br>
<input type="hidden" value="{{product?.PRODUCT_CODE}}">
<p class="font-weight-bold text-primary">{{product?.PRODUCT_PRICE}} ₹</p>
</div>
<button type="button" class="btn btn-primary col-sm-12 corner" routerLink="/my-cart" (click)="getProductName(Pname1)">
<strong>View Details</strong>
</button>
</div>
</div>
</div>
</div>
此处，用户选择的下拉值将传递到服务文件。
如上所述，网格组件是普通的子组件，因此在页面加载时，网格组件按照公共组件发送的服务文件中的值显示视图。
现在当用户从公共组件的下拉列表中选择一些值，将值传递给服务文件时，根据这些值，我从服务文件中调用API。
现在我要做的是当新值从公共组件到达服务文件时我想根据新值更改网格组件的视图。
如果有可能，请指导我解决。 谢谢
答案 0 :(得分：1)
在GridComponent中创建一个@input字段，然后从父组件传递该值。这样的事情：
@Input() inputValue: string;
然后你就像那样调用组件
<app-grid [inputValue]="valueFromCommon" ></app-grid>
此处共同的价值是即将到来的价值。我在这里使用双向绑定，但如果你不想让它改回来，你可以使用单向绑定。
然后要处理更改，您有两种选择。
在网格组件中，您可以创建此类方法（基本上是在更改时实现）
ngOnChanges(changes: SimpleChanges) {
console.log("new value:",changes);
}
此处，更改对象包含已更改的值，其先前值及其新值。无论如何你都可以处理它。
为@input字段创建getter和setter并处理那里的更改
private _inputValue: string;
@Input() set inputValue(value: string) {
this._inputValue= value;
// process new value here
}
get inputValue(): string {
return this._inputValue;
}
-----使用您问题的实际代码进行编辑-----
在您的示例中，从服务加载网格组件中的数据的方式使其与父组件分离。您从注入的服务加载ngOnInit（）中的所有内容。相反，您应该从父组件传递所需的值。
例如，将这些更改为输入
export class GridComponent {
@Input() C_code: string;
@Input() G_code: string;
@Input() SG_code: string;
然后在ngOnInit中不要从服务中获取它们并使用来自父组件的那些
ngOnInit() {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
console.log(data);
});
}
然后调用网格组件使用：
<app-grid [C_code]="categorycode" [G_code]="groupcode" [SG_code]="subgroupcode" ></app-grid>
这样，您将从公共组件中选择的值传递给网格组件。现在，为了处理这些值的更改（更改会自动传播到组件，但如果您在更改时有外部逻辑，则需要添加它）。所以在网格组件中添加该方法：
ngOnChanges(changes: SimpleChanges) {
this.CartdataService.get_Selected_Category_Of_Products(this.C_code,
this.G_code, this.SG_code).subscribe(
data => {
this.products = data;
console.log(data);
});
}
与ngOnInit基本相同 - 查询服务。这是您在属性更改时要执行的操作 - 重新查询服务