2
votes

Passer des données dans un composant Web angulaire

J'essaie d'écrire des composants Web dans Angular et je n'arrive pas à comprendre comment transmettre des données au composant.

<my-component someId="1234"></my-component>

J'espérais trouver un moyen de l'implémenter et obtenir le someId dans mon composant angulaire. Est-il possible de l'implémenter ou devrais-je essayer d'utiliser des slots? Pour être clair, je demande comment créer des composants Web en utilisant composants angulaires non normaux.

angular web-component

0 commentaires

3 Réponses :

0
votes

Vous devez utiliser la liaison de données

export class MyComponent {
  @Input('id') id: string;
}

0 commentaires

0
votes

Vous devez utiliser la variable @Input () déclarée dans votre composant partagé.

<my-component someId="1234"></my-component>

// HTML

export class MyComponent {
 @Input() someId: string = '1234';//default value
}

"someId" est un paramètre d'entrée optionnel qui peut également être ignoré.

EDIT: dans le cas où vous liez une chaîne ou un nombre constant dans une entrée, il n'est pas nécessaire de le spécifier entre crochets. Vous pouvez utiliser la même syntaxe que l'attribut html normal.

0 commentaires

0
votes

J'ai eu ce problème depuis environ deux jours et j'ai finalement trouvé la solution.

Ce que vous devez faire est d'utiliser la méthode ngOnChanges () dans votre composant enfant ( composant Web que vous souhaitez exposer). Comme il s'agit de détecter tout changement de vos champs @Input () .

Ici, je laisse un extrait de code de mon composant Web :

@Component({
  selector: 'app-shipment-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {

  @Input() domain;

  @Output() response = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.domain) {
      console.log("Domain URL: ", this.domain);  
      this.response.emit(this.domain);
    }
  }

}

0 commentaires