Qu'est-ce que @Input() est-il utilisé?

J'ai décidé d'apprendre Angulaire 4 et suivez le tutoriel à https://angular.io/tutorial/toh-pt3 Mais, encore une fois, la question se pose.
Qu'est-ce que ce 

@Input () hero: Hero;

C'est pour quoi?
Que faut-il faire?
Ça veut dire quoi?

Voici le code. -Héros de détails.composante.ts

import { Component, Input } from '@angular/core';
import { Hero } from "./hero";


@Component({
 selector: 'hero-detail',
 templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
 @Input() hero: Hero;
}

Ici est un autre code pour les fichiers app.components.ts, app.components.html, hero-details.components.html

Expliquez s'il vous plaît si quelqu'un peut

  • Est-il équivalent à utiliser @Input('foo') et utiliser @Directive({ entrées:['foo'] }) ? Si non, comment sont-ils différents?
  • L'application démo pour montrer partage de données entre les composants à l'aide de @input freakyjolly.com/...
  • Pas sûr de savoir pourquoi cela a été fermé. L'OP est bien évidemment de nouveau Angulaire, mais la question est très spécifique: Quel est l'angle de @Input annotation moyenne, utilisé dans l'exemple de code ci-dessus & prises à partir de l'angle de tutoriel lien. Pas pire que Que dois-deux points d'interrogation ensemble signifient en C#? avec son 1372 upvotes. ;^)
InformationsquelleAutor 5tka | 2017-08-18
  1. 17

    Dans cet exemple, le héros-le détail est un composant enfant, il est destiné à être inséré dans un composant parent qui aura le "héros" de données, et que les "héros" de données sera passé dans le héros de détail des composants via le héros de la variable d'instance marqué comme une entrée par le @Input décorateur.

    Fondamentalement, la syntaxe est la suivante:

    Importer le Héros de l'interface du héros.de l'interface.fichier ts, c'est la définition de la classe de Héros

    import { Hero } from "./hero";

    Utiliser un Input décorateur à la variable d'instance, de la disposition des composants parents pour transmettre les données vers le bas.

    @Input()

    Le héros variable d'instance de lui-même, qui est de type Héros, l'interface de ce qui a été importé ci-dessus:

    hero: Hero;

    Un composant parent serait d'utiliser ce héros-détail des composants enfants et passer le héros de données en l'insérant dans le code html du template comme ceci:

    <hero-detail [hero]="hero"></hero-detail>

    Où le composant parent a une variable d'instance nommé "héros", qui contient les données, et c'est passé dans le héros de détails composant.

    • Merci pour la réponse. Je tiens à préciser, je comprends bien? Que le tiret indique que où puis-je sortie de l'élément de modèle? Je suis désolé si je n'ai pas former correctement à la question.prntscr.com/g9y7wh
    • Dans votre exemple, il y a, dans l'application.composant, le selectedHero est transmis à la heroDetails @Entrée de liaison du héros-détail composant enfant par voie de la syntaxe de la app.component.html et puis le héros-détail composant a heroDetails dans son propre heroDetails variable d'instance, et de la hero-detail.componeont.html le modèle est en train de faire un chèque à l' *ngIf pour s'assurer heroDetails possède une valeur (si quelque chose est en elle, elle renvoie true et l'exécution de l'expression), et s'il est heroDetail données qu'il affiche dans le héros de détails composant enfant.
    InformationsquelleAutor Stephen R. Smith
  2. 8

    @Input() hero signifie que hero est une variable qui est passé sur cette composante de celle du parent.e.g

    <hero-detail [hero]="(object of hero)"> </hero-detail>

    Ici, je suis de passage héros objet de hero détail de la composante de son composant parent.

    InformationsquelleAutor Ali Turab Abbasi
  3. 6

    Simplement, par input mot clé que vous dire angulaire qu'une variable nommée hero prendra Hero objet en entrée à partir d' 'HeroDetailComponent" et sera en mesure de passer ce Hero d'objet de l'un de ses composant enfant. Ceci est appelé D'Entrée De Liaison

    InformationsquelleAutor Karan Desai