首页 文章

如何在angular4中动态地将视图从一个组件更改为另一个组件

提问于
浏览
1

在我的应用程序中,我需要根据父组件值将视图从一个组件更改为另一个组件 .

查看结构

<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}} &#8377;</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>

此处,用户选择的下拉值将传递到服务文件 .

正如我在上面提到的那样,网格组件是普通的子组件,因此在页面加载时,网格组件按照公共组件发送的服务文件中的值显示视图 .

now当用户从公共组件的下拉列表中选择了一些值,这些值将值传递给服务文件时,根据这些值,我从服务文件中调用API .

现在我想要做的是当新值从公共组件到达服务文件时我想根据新值更改网格组件的视图 .

如果有可能,请指导我解决 . 谢谢

1 回答

  • 1

    在GridComponent中创建一个@input字段,然后从父组件传递该值 . 像这样的东西:

    @Input() inputValue: string;
    

    然后你这样调用组件

    <app-grid [inputValue]="valueFromCommon" ></app-grid>
    

    这里共同的 Value 是即将到来的 Value . 我在这里使用双向绑定,但如果你不想让它改回来,你可以使用单向绑定 .

    然后要处理更改,您有两个选择 .

    • 首选方法:)

    在网格组件中,您可以创建此类方法(基本上在更改时实现)

    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基本相同 - 查询服务 . 这是您在属性更改时要执行的操作 - 重新查询服务

相关问题