时间戳

首页 > 解决方案 > 如何从角度的模型组件中调用另一个组件函数？

angular - 如何从角度的模型组件中调用另一个组件函数？

问题描述

我需要从modalcomponent调用homecomponent的addItems函数。当我调用该函数时，该函数被调用但该行未添加到html中。调用函数时，我需要添加一个新的项目行。下面是我的代码主页组件

import { Component, OnInit } from '@angular/core';
import { CommonComponent } from '../../common/common.component';
import  $ from 'jquery';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})  
export class HomeComponent implements OnInit {

  constructor(public common:CommonComponent) { }

  item_row: any[] = [];
  ngOnInit(): void {
    console.log(this.common.quote_company);
    this.item_row.push({
      'item_name':null,
      'hsn_code':null,
      'unit_price':null,
      'qty':null,
      'taxable_value':null,
      'total':null
    })
  }
   testJquery(){
    $('.test').html('test'); 
  }

  addItems(){
  this.addRow();
  }
  addRow(){
    const new_row={
      'item_name':'test',
      'hsn_code':'test',
      'unit_price':'test',
      'qty':'test',
      'taxable_value':'test',
      'total':'test'
    }
    this.item_row.push(new_row);
    console.log(this.item_row);
  }


}

我正在从模态组件 html 调用 homecomponent 函数。调用此函数时，应将新行附加到表中。

模态组件

import { Component, OnInit ,EventEmitter, Output } from '@angular/core';
import { AddQuoteComponent } from '../add-quote/add-quote.component';
import { CommonComponent } from '../../common/common.component';
import { HomeComponent } from '../home/home.component';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor(
    public home : HomeComponent,
    public common :CommonComponent
    ) { }

  ngOnInit(): void {

  }
  selectItem(){
    console.log('test');
    this.home.addItems();
  } 

}

标签： angularbindingcomponents

解决方案

你好，Dinesh D，我已经解释过了，请检查并一步一步进行。

首先，您必须创建 2 个组件和 html 文件以及添加 MatDialog 材料。

AddConfigurableProductComponent 可配置产品组件

FYI 下面的 ConfigurableProductComponent 在 import AddConfigurableProductComponent

从 './add-configurable-product/add-configurable-product.component' 导入 { AddConfigurableProductComponent }

我有下面的按钮 html 中的产品列表页面

<div class="add-button mt-20">
    <button type="button" (click)="addCampaignProduct()" mat-raised-button color="primary"
      [title]="'ADD_CAMPAIGN_PRODUCT' | translate:lang">
      <i class="material-icons">add_circle</i>{{ 'ADD_CAMPAIGN_PRODUCT' | translate:lang }}
    </button>
  </div>

现在我点击组件“ConfigurableProductComponent”下的 addCampaignProduct() 调用函数的调用函数。

 addCampaignProduct() {
    const dialogRef = this.dialog.open(AddConfigurableProductComponent, {
      disableClose: true,
      data: { campaignId: this.params.id }
    })
    dialogRef.afterClosed().subscribe(() => {
      this.getProductList()
    });
  }

在 AddConfigurableProductComponent 下

ngOnInit() {

}

推荐阅读