DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Creating a subcomponent]]|[[Cleaning up components]] ->|

Créer encore un nouveau subcomponent.

<code>
// autrecomponent.html
<section>
  <ul>
    <li>{{objet.nom}}</li>
  <ul>
</section>
</code>

<code>
// autre-component.component.ts
//on réutilise l'interface, dans les faits il serait donc justifié de le mettre dans un fichier à part
interface Type_de_donnees {
  nom: String;
  identifiant: string;
}

@component ({
  selector: 'autre-component',
  templateUrl: 'partials/autrecomponent.html',
  input: ['sometext'],
})

export class AutreComponent {
  objets = DATA; // constantes en capitales
}
</code>

<code>
// app.component.ts
(…)
import {AutreComponent} from './autre-component.component.ts';
(…)
@component ({
  (…)
  directives: [CustomElementComponent, AutreComponent]
  (…)
})

export class appComponent {
  objets = DATA;
  objetN: objet;
  
  une_methode(item) {
    this.objetN = item;
  }
  
}
</code>

<code>
// app.html
(…)
<ul> // on montre pas si pas eu de requête
  <li *ngFor="#item of objets" (click)="une_methode(item);"> // + clic + montrer qu'après requête
    <custom-element [element]=item></custom-element> comme spécifié
  </li>
</ul>


<autre-component [object]="objetN"></autre-component> // le object identifie les données on le retrouve dans autrecomponent.html
</code>

...