如何从 angular 中的 model 组件调用另一个组件 function？

Question

I need to call the addItems function of homecomponent from modalcomponent.When i call the function the function is called but the row is not added in html. 调用 function 时，我需要添加一个新项目行。下面是我的代码 Home Component

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 调用主组件 function。 当调用此 function 时，应将新行附加到表中。

模态组件

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();
  } 

}

Answer 1

你好 Dinesh D 这里是我已经解释请检查和 go 一步一步。

首先，您必须创建 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>

现在我点击当时调用 function 为 addCampaignProduct() 在组件“ConfigurableProductComponent”下调用 function。

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

在 AddConfigurableProductComponent 下

ngOnInit() {

}