如何获得从孩子那里点击父母按钮的按钮

Question

我有以下代码。我试图弄清楚如何使父级对父级html中的“编辑”按钮的单击做出反应。有人可以告诉我我想念什么吗？基本上，父级具有在其中显示子级的路由出口，而编辑按钮是父级html的一部分。代码对单击编辑按钮没有反应。

我的愿望是，当用户单击“编辑”按钮时，使路由器出口在页面的“显示”区域中将表单显示为其他子项。换句话说，我只希望页面更改父级html中路由器出口的位置。

父母：

    import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
// import { Menu } from 'primeng/menu';
// import { style } from '@angular/animations';
import { AppMenuService } from '../services/app-menu.service';
import { AppMenu } from '../models/app-menu.model';

@Component({
  selector: 'app-homescreen',
  templateUrl: './homescreen.component.html',
  styleUrls: ['./homescreen.component.css'],
  providers: [AppMenuService]
})
export class HomescreenComponent implements OnInit {
  title = 'niche-app Home';
  appMenu: AppMenu;

  constructor(private appMenuService: AppMenuService) { }

  items: MenuItem[];

  ngOnInit() {
    this.appMenu = this.appMenuService.getAppMenu();
    this.items = [{
      label: 'Menu', style: "background-color: red",
      items: [
        { label: 'Home', routerLink: "/home", routerLinkActiveOptions: "active" },
        { label: 'Our Company', routerLink: "/ourcompany.component", routerLinkActiveOptions: "active" },
        **{ label: 'Products', routerLink: "/product.component", routerLinkActiveOptions: "active" },**
        { label: 'Company', routerLink: "/company.component", routerLinkActiveOptions: "active" },
        { label: 'Contact Information', routerLink: "/contact.info.component", routerLinkActiveOptions: "active" },
        { label: 'Shipment Information', routerLink: "/shipment.info.component", routerLinkActiveOptions: "active" },
        { label: 'Parent ASINs', routerLink: "/parent.asin.component", routerLinkActiveOptions: "active" },
        { label: 'Competitors To Target', routerLink: "/competitors.to.target.component", routerLinkActiveOptions: "active" },
        { label: 'Checkpoint Criteria', routerLink: "/checkpoint.criteria.component", routerLinkActiveOptions: "active" },
        { label: 'Criteria Yes Nos', routerLink: "/criteria.yes.no.component", routerLinkActiveOptions: "active" },
        { label: 'Download', icon: 'pi pi-fw pi-download' }
      ]
    }];
  }

  handleEdit() {
    console.log("handleEdit(): Called...");
  }

}
    <div class="ui-g">
    <div class="ui-g-12 ui-md-2">
        <p-menu class="left-menu" [model]="items" id="itemsId"></p-menu>
    </div>
    <div class="ui-g-12 ui-md-10 ui-g-nopad">
        <div class="ui-g-12">
            <p-toolbar id="toolbarId">
                <div class="ui-toolbar-group-left">
                    <button pButton type="button" label="New" icon="pi pi-plus" id="newBtn"></button>
                    **<button pButton type="button" label="Edit" icon="pi pi-search" id="editBtn" class="ui-button-danger" (click)="handleEdit($event)"></button>**
                    <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"
                        id="uploadBtn"></button>

                    <i class="pi pi-bars"></i>

                    <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"
                        id="saveBtn"></p-splitButton>
                </div>

                <div class="ui-toolbar-group-right">
                    <button pButton type="button" icon="pi pi-search" id="searchId"></button>
                    <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"
                        id="calendarBtn"></button>
                    <button pButton type="button" icon="pi pi-times" class="ui-button-danger" id="exitBtn"></button>
                </div>
            </p-toolbar>
        </div>
        <router-outlet></router-outlet>

    </div>
    <div class="ui-g-12">
        <!-- <p-panel header="Footer" [showHeader]=false style="border-top-style:solid; border-top-width: 1px; border-top-color: rgb(200,200,200)"> -->
        <p-panel header="Footer" [showHeader]=false id="footerId">
            Some text
        </p-panel>
    </div>
</div>

孩子：

    import { Component, OnInit, Input } from '@angular/core';
import { Product } from 'src/app/models/product.model';
import { ProductStore } from 'src/app/stores/product-store';
import { Company } from 'src/app/models/company.model';
import { AppMenu } from 'src/app/models/app-menu.model';
import { AppMenuService } from 'src/app/services/app-menu.service';

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

  appMenu: AppMenu;

  products: Product[];

  originalId: number;
  selectedProduct: Product = {
    id: null,
    asin: '',
    productPageLink: '',
    twentyOnePointScore: null,
    primeLowPrice: null,
    totalUnitsSoldPerMonth: null,
    totalRevenuePerMonth: null,
    numberOfCompetitiveSellers: null,
    unitsPerMonth: null,
    revenuePerMonth: null,
    estimatedProductCost: null,
    actualProductCost: null,
    estimatedAmazonFees: null,
    actualAmazonFees: null,
    estimatedShippingCost: null,
    actualShippingCost: null,
    estimatedProcessingCost: null,
    actualProcessingCost: null,
    estimatedProfitMargin: null,
    actualProfitMargin: null,
    estimatedROI: null,
    actualROI: null,
    companys: null,
    contactInfos: null,
    criteriaYesNos: null,
    competitorsToTarget: null,
    shipmentInfo: null,
    parentAsin: null,
    notes: '',
    createdBy: '',
    createdDate: null,
    updatedBy: '',
    updatedDate: null
  };

  @Input() set product(value: Product) {
    if (value) {
      this.originalId = value.id;
    }
    this.selectedProduct = Object.assign({}, value);
  }

  constructor(private productStore: ProductStore, private appMenuService: AppMenuService) {
    this.productStore.init();
  }

  ngOnInit() {
    this.appMenu = this.appMenuService.getAppMenu();
    console.log("id=" + this.appMenu.id);
    console.log("screenName=" + this.appMenu.screenName);
    console.log("url" + this.appMenu.url);
    this.appMenu.id = 3;
    this.appMenu.screenName = "productScreen";
    this.appMenu.url = "/product.component";
    this.appMenuService.setAppMenu(this.appMenu);
   this.productStore.getAll$().subscribe(products => { this.products = products; })
  }

  routeToCompanies(product: Product): void {
    // TODO need to query for companies associted with the product.  This means the controller on the backend needs a method for this.
    this.selectedProduct = product;
    console.log('routeToCompanies(): called...');
    var companies: Company[] = product.companys;
    for (var i in companies) {
      console.log("ID=" + companies[i].id)
      console.log("Company Name=" + companies[i].companyName)
    }
    console.log("id=" + this.appMenu.id);
    console.log("screenName=" + this.appMenu.screenName);
    console.log("url=" + this.appMenu.url);
    // this.store.dispatch({ type: 'SELECT_AUTHOR', payload: this.selectedAuthor });
    // this.router.navigate(['/home/authors/detail']);
  }
}

 <div class="row">
  <div class="col-md-12">

    <p-dataTable [value]="products" [rows]="10" expandableRows="true" [paginator]="true" [responsive]="true"
      selectionMode="single" [(selection)]="selectedProduct">
      <p-header>
        <b>Products</b>
      </p-header>
      <p-column expander="true" styleClass="col-icon" [style]="{'width': '30px'}"></p-column>
      <!-- <p-column field="id" header="ID" [sortable]="true" [style]="{'width': '3%'}"></p-column> -->
      <p-column field="id" header="ID" [sortable]="true" [style]="{'width': '3%'}"></p-column>
      <p-column field="asin" header="ASIN" [sortable]="true"></p-column>
      <p-column field="totalRevenuePerMonth" header="Total/Month" [sortable]="true"></p-column>
      <p-column field="primeLowPrice" header="Prime Low Price" [sortable]="true"></p-column>
      <p-column field="totalUnitsSoldPerMonth" header="Monthly Units Sold" [sortable]="true"></p-column>

      <ng-template let-product pTemplate="rowexpansion">
          <div class="p-grid p-dir-col">
              <div class="p-col p-col-align-start"><b>Product Page Link: </b>{{ product.productPageLink }}</div>
              <div class="p-col p-col-align-start"><b>Product Number Of Competitive Sellers: </b>{{ product.numberOfCompetitiveSellers }}</div>
              <div class="p-col p-col-align-start"><b>Product Units Per Month: </b>{{ product.unitsPerMonth }}</div>
              <div class="p-col p-col-align-start"><b>Product Estimated Product Cost: </b>{{ product.estimatedProductCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Actual Product Cost: </b>{{ product.actualProductCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Estimated Amazon Fees: </b>{{ product.estimatedAmazonFees }}</div>
              <div class="p-col p-col-align-start"><b>Product Actual Amazon Fees: </b>{{ product.actualAmazonFees }}</div>
              <div class="p-col p-col-align-start"><b>Product EstimatedShippCost: </b>{{ product.estimatedShippingCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Actual Shipping Cost: </b>{{ product.actualShippingCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Actual Processing Cost: </b>{{ product.actualProcessingCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Estimated Processing Cost: </b>{{ product.estimatedProcessingCost }}</div>
              <div class="p-col p-col-align-start"><b>Product Estimated Profit Margin: </b>{{ product.estimatedProfitMargin }}</div>
              <div class="p-col p-col-align-start"><b>Product Estimated ROI: </b>{{ product.estimatedROI }}</div>
              <div class="p-col p-col-align-start"><b>Product Actual ROI: </b>{{ product.actualROI }}</div>

              <div class="p-col p-col-align-start"><b>Record created date: </b>{{ product.createdDate | date }}</div>
              <div class="p-col p-col-align-start"><b>Record created by: </b>{{ product.createdBy }}</div>
              <div class="p-col p-col-align-start"><b>Record last updated: </b>{{ product.updatedDate | date }}</div>
              <div class="p-col p-col-align-start"><b>Record last updated by: </b>{{ product.updatedBy }}</div>
              <div class="p-col p-col-align-start"><b>Product Notes: </b>{{ product.notes }}</div>             
          </div>
          <div>
              <button pButton type="button" icon="pi pi-search" label="Contact Info" class="ui-button-raised ui-button-info" style="margin-right: .25em"></button>
              <button pButton type="button" icon="pi pi-search" label="Checkpoint Criteria" class="ui-button-raised ui-button-info" style="margin-right: .25em"></button>
              <button pButton type="button" icon="pi pi-search" label="Competitors To Target" class="ui-button-raised ui-button-info" style="margin-right: .25em"></button>
              <button pButton type="button" icon="pi pi-search" label="Shipment Info" class="ui-button-raised ui-button-info" style="margin-right: .25em"></button>
              <button pButton type="button" icon="pi pi-search" label="Parent Asin" class="ui-button-raised ui-button-info"></button>
          </div>
      </ng-template>
      <p-column field="companys" header="Companies" [sortable]="false" [filter]="false" [style]="{'width': '100px'}">
        <ng-template let-row="rowData" pTemplate type="body">
          <span class="fa fa-search fa-15" (click)="routeToCompanies(row)">
            <span class="sr-only">View Company</span>
          </span>
        </ng-template>
      </p-column>

    </p-dataTable>
    <!-- <div class="row">
            <button type="button" class="btn btn-primary btn-sm pull-right" style="margin-right:0px; margin-top:5px; margin-bottom:5px"
                (click)="addAuthor()">Add Author</button>
        </div> -->
  </div>
</div>

Answer 1

创建如下所示的服务

    @Injectable()
export class Service {
    constructor() { }

    private emitChangeSource = new Subject<any>();

    changeEmitted$ = this.emitChangeSource.asObservable();

    emitChange() {
        this.emitChangeSource.next();
    }
}

您的父组件

constructor(
    private service: Service
    ) {
   }

   login(){
    this.service.emitChange()
   }

您的子组件：

constructor(
    private service: Service,
    ) { 
    service.changeEmitted$.subscribe(data => {
      // here fetch data from the session storage 
    })
  }

Answer 2

我将Prasanth答案标记为正确答案，因为这是最佳答案。还有其他方法可以进行组件交互，但他提供的方法确实可以。上面的Anil链接是一个很好的参考，值得一读。

也就是说，我已经有服务了。问题在于，这个问题确实与问题无关，因为它太笼统了。当然，这是我的错。

问题是父级没有响应子级（单击），因为我将路由出口错误地放置在父级HTML页面中。一次，我进行了更正后，（单击）开始工作。

感谢所有答复。