在每个按钮单击角度后加载组件

Posted 2023-03-13

【中文标题】在每个按钮单击角度后加载组件

【英文标题】：Load component after every button click on angular

【发布时间】：2020-06-13 02:57:33

【问题描述】：

当我尝试在 Angular 中组织两个组件之间的通信时遇到了一些困难。

父组件是“animal”，子组件是“animalEspece”。

这就是我的网页现在的样子：

当我单击 Requin、Shark 等动物类型时...我希望子组件（称为 animalEspece）仅显示这种类型的动物。

为此，我有一个包含所有动物的列表，并将此列表提供给组件 animalEspece。

但是当我点击时没有任何反应。组件 animalEspece 接收变量但没有显示任何内容。

这是我的动物 html 代码：

<p scope="col" style="text-shadow:0 0 2px #ff1c1ce5,0 0 30px #ff1c1ce5,0px 0px 5px #ff1c1ce5, 0 0 150px #ff1c1ce5;color:#ff1c1ce5;
text-align: center; font-size: 25px;">Nos especes</p>
<div class="scrolling-wrapper">
  <a *ngFor="let a of especeAnimalPresente" class="animated-button1" (click)="changeEspeceChoisi(a);">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    a
  </a>
</div>

<table class="table" style="color:white">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Espece</th>
        <th scope="col">Nom</th>
        <th scope="col">Sexe</th>
        <th scope="col">Signe distinctif</th>
        <th scope="col">Bilan de sante</th>
        <th scope="col">Date arrivee</th>
        <th scope="col">Date depart</th>
        <th scope="col">Taille</th>
        <th scope="col">Age</th>
        <th scope="col">Bassin d'appartenance</th>
        <th scope="col">supprimer</th>

      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let a of animaux">
          <th scope="row">a.id</th>
          <td>a.espece</td>
          <td>a.nom</td>
          <td>a.sexe</td>
          <td>a.signeDistinctif</td>
          <td>a.bilanSante</td>
          <td>a.dateArr</td>
          <td>a.dateDep</td>
          <td>a.taille</td>
          <td>a.age</td>
          <td>a.bassin.id</td>
          <td>
            <button class="bouton17" (click)="supprimerAnimal(a.id)">
              Supprimer
            </button></td>
          <td></td>
        </tr>
      </tbody>
</table>

这是我的animal.ts：

import  Component, OnInit  from '@angular/core';
import  AnimalService  from "./animal.service";
import  Animal  from "./animal";
import  Bassin  from "../bassin/bassin";

@Component(
  selector: 'app-animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css']
)
export class AnimalComponent implements OnInit 

  private nomEspece:string;
  private animaux:Array<Animal>;
  private especeAnimalPresente:Array<string>;
  private especeAnimalPresenteTmp:Array<string>;
  constructor(private animalService: AnimalService)  
    this.especeAnimalPresenteTmp = [];
  

  ngOnInit() 
    this.recupAllAnimals();
  

  supprimerAnimal(id:number)
    this.animalService.deleteAnimal(id);
  

  recupAllAnimals()
    this.animalService.getAllAnimaux().subscribe(data => 
      this.animaux = data;
      this.recupEspecePresent();
      console.log(this.animaux);
    )

  

  recupEspecePresent()
     if (this.animaux)
      for (let animal of this.animaux) 
          this.especeAnimalPresenteTmp.push(animal.espece);
      
      this.especeAnimalPresente = this.removeDuplicates(this.especeAnimalPresenteTmp);
     
  

  removeDuplicates(array) 
    let unique = ;
    array.forEach(function(i) 
      if(!unique[i]) 
        unique[i] = true;
      
    );
    return Object.keys(unique);
  

  retourneAnimal()
    return this.animaux;
  

  changeEspeceChoisi(a)
    alert(a);
    this.nomEspece=a;
    alert(this.nomEspece);
  

  retourneEspece()
    return this.nomEspece;
  


    Component son :
    <br>
    <app-animalespece [animaux]=retourneAnimal() [nomEspece]=retourneEspece()></app-animalespece>
    <br>

这是我的 html animalEspece 代码：

<table class="table" style="color:white">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Espece</th>
        <th scope="col">Nom</th>
        <th scope="col">Sexe</th>
        <th scope="col">Signe distinctif</th>
        <th scope="col">Bilan de sante</th>
        <th scope="col">Date arrivee</th>
        <th scope="col">Date depart</th>
        <th scope="col">Taille</th>
        <th scope="col">Age</th>
        <th scope="col">Bassin d'appartenance</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let a of listeAnimauxEspece">
          <th scope="row">a.id</th>
          <td>a.espece</td>
          <td>a.nom</td>
          <td>a.sexe</td>
          <td>a.signeDistinctif</td>
          <td>a.bilanSante</td>
          <td>a.dateArr</td>
          <td>a.dateDep</td>
          <td>a.taille</td>
          <td>a.age</td>
          <td>a.bassinAppartenance</td>
        </tr>
      </tbody>
</table>

这是我的animalEspece.ts：

import  Component, OnInit, Input  from '@angular/core';
import  Animal  from "../animal/animal";

@Component(
  selector: 'app-animalespece',
  templateUrl: './animalespece.component.html',
  styleUrls: ['./animalespece.component.css']
)
export class AnimalespeceComponent implements OnInit 

  @Input()
  private animaux:Array<Animal>;

  @Input()
  private nomEspece:string;

  private listeAnimauxEspece:Array<Animal>;

  constructor() 
    this.listeAnimauxEspece = [];
  

  ngOnInit() 
    this.filtreAnimauxEspece();
  

  filtreAnimauxEspece()
    if (this.animaux)
      for (let animal of this.animaux) 
        if (animal.espece == this.nomEspece)
          this.listeAnimauxEspece.push(animal);
        
      
    
  

经过多次测试，我了解到问题是我的组件 animalEspece 在我单击按钮之前已经初始化。如果我创建一个初始化为 false 的新布尔值（名为 bool），我可以解决我的问题，但是当我点击动物按钮时更改为 true。如果我用动物 html 写：

<app-animalespece *ngIf='bool' [animaux]=retourneAnimal() [nomEspece]=retourneEspece()></app-animalespece>

但此解决方案仅适用于第一次单击动物按钮。而且我觉得这不是解决这个任务的好方法。

所以我需要帮助，以便当我单击动物按钮时，此按钮会显示相应的动物。每次点击那个按钮。

提前感谢您的帮助。

【参考方案1】：

您需要做的是在输入更改时进行拦截。您现在的问题是子组件正在接受初始输入，它没有检查输入的更新。

因此，解决问题的一种方法是为输入创建一个集合函数。像这样，

private _nomEspece:string;
@Input()
set nomEspece(nom:string) 
  // update value
  this._nomEspece = nom;
  // update list
  this.listeAnimauxEspece = [];
  this.filtreAnimauxEspece();

get nomEspece():string 
  return _nomEspece;

现在，每次输入更改时，您都会更新值并更新列表。

Angular Docs - Intercept input property changes with a setter

【讨论】：

谢谢它的工作！但我还有其他问题。现在如果我单击一个 Requin 按钮，所有的 Requin 都会显示出来。但是，如果我点击 Tortue 按钮，我所有的 Requin 和我所有的 Tortue 都会显示出来。如何在每次点击之后（或之前）重置我的列表？

我只是编辑答案，基本上你只需要重新启动列表，在调用filtreAnimauxEspece之前检查线路

非常感谢您的回答！

很高兴能帮到你！！。