绑定到 Angular 中的嵌入式组件 7

Question

在 Angular（版本 7）中，我将一个组件（绘图）嵌入到另一个组件（站点）中：

<div class="plots" *ngIf="!selectedSiteId == ''">
  <app-plots [selectedsiteId]="this.selectedSiteId"></app-plots>
</div>

这个想法是，如果用户选择查看网站的图表，那么显示的嵌入式组件会收到 selectedSiteId。

此设置适用于第一次点击。但不是后续点击。该按钮绑定到以下功能：

  getPlots(id: number): void {
    this.selectedSiteId = id;
  }

正如我所说，它适用于第一次按钮点击，但不适用于任何后续按钮点击。这是为什么？

完整代码：

sites.component.ts

import { Component, Inject, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Site } from '../site';

@Component({
  selector: 'app-sites',
  templateUrl: './sites.component.html',
  styleUrls: ['./sites.component.css']
})

export class SitesComponent implements OnInit {
  public sites: Site[];
  public selectedSiteId: number = 0;
  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getSites();
  }

  getPlots(id: number): void {
    this.selectedSiteId = id;
  }

  getSites(): void {
    this.dataAccessService.getSites()
        .subscribe(sites => this.sites = sites);
  }
}

sites.component.html

<table class='table' *ngIf="sites">
  <thead>
    <tr>
      <th>ID</th>
      <th>Site</th>
      <th>Postcode</th>
      <th>Plots</th>
      <th>Plots Completed</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let site of sites">
      <td>{{ site.id }}</td>
      <td>{{ site.siteName }}</td>
      <td>{{ site.sitePostCode }}</td>
      <td>{{ site.plotCount }}</td>
      <td>{{ site.plotCompletedCount }}</td>
      <!-- <td>{{ site.plots.length }}</td> -->
      <td><button (click)="getPlots(this.site.id)">Show Plots</button></td>
    </tr>
  </tbody>
</table>


<div class="plots" *ngIf="!selectedSiteId == ''">
  <app-plots [selectedsiteId]="this.selectedSiteId"></app-plots>
</div>


<div class="plots" *ngIf="!selectedSiteId == ''">
  <app-plots [selectedsiteId]="this.selectedSiteId"></app-plots>
</div>

plots.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Plot } from '../site';

@Component({
  selector: 'app-plots',
  templateUrl: './plots.component.html',
  styleUrls: ['./plots.component.css']
})

export class PlotsComponent implements OnInit { 

  public plots: Plot[];
  @Input() selectedsiteId: number;

  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getPlots(this.selectedsiteId);
  }

  getPlots(id: number): void {
    alert(id);
    this.dataAccessService.getPlots(id)
      .subscribe(plots => this.plots = plots);
  }

  loadPlotDetails(id: number): void {
  }
}

plots.component.html

<table class='table' *ngIf="plots">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Site</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let plot of plots">
      <td>{{ plot.id }}</td>
      <td>{{ plot.name }}</td>
      <td>{{ plot.site }}</td>
      <a routerLink="/plot-detail">Details</a>
    </tr>
  </tbody>
</table>

Answer 1

您应该必须在 ngOnChanges 生命周期挂钩中调用 getPlots() 方法。每当 @Input 值发生变化时，都会调用 ngOnChanges。

import { Component, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Plot } from '../site';

@Component({
  selector: 'app-plots',
  templateUrl: './plots.component.html',
  styleUrls: ['./plots.component.css']
})

export class PlotsComponent implements OnInit { 

  public plots: Plot[];
  @Input() selectedsiteId: number;

  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getPlots(this.selectedsiteId);
  }

  ngOnChanges() {
    this.getPlots(this.selectedsiteId);
  }

  getPlots(id: number): void {
    alert(id);
    this.dataAccessService.getPlots(id)
      .subscribe(plots => this.plots = plots);
  }

  loadPlotDetails(id: number): void {
  }
}

绑定到 Angular 中的嵌入式组件 7

Binding to embedded component in Angular 7

angular

angular7