@Entrée dans Angulaire 4

Je suis nouveau sur Angulaire 4.Selon ma compréhension, @Entrée est utilisée pour transmettre des valeurs à un composant. Mais quand je l'utilise comme mentionné ci-dessous cela ne fonctionne pas.

my-file.component.html
    <h1 [user] = "currentuser"></h1>

my-file.component.ts
    @Input() 
    user : string;
<h1 n'est pas un composant
Comme Angulaire mentionné. Vous devez l'ajouter à un composant sélecteur, les sélecteurs sont décrites dans la tour ou le heros partie 3: angulaire.io/tutoriel/toh-pt3.

OriginalL'auteur Ramya | 2017-09-04

  1. 5

    Cela signifie que vous pouvez passer à la chaîne d'entrée dans votre mon-fichier composant lui-même pas de n'importe quel élément HTML (c'est à dire h1 dans votre cas) dans le composant lui-même.

    c'est à dire dans le composant parent, vous pouvez appeler quelque chose comme:

    <my-file [user]="currentuser"></my-file>

    Alors cette valeur de l'utilisateur est disponible pour être utilisé au sein de votre mon-fichier composant enfant.

    Alors que vous serez assez aimable pour m'aider à comprendre comment il fonctionne pour un espace réservé. Le code HTML est : <input type="search" [réservé]="'témoin Personnalisé'">
    L' .fichier ts : @Input('placeholder') texterecherché = 'Tapez votre recherche";
    placeholder est un attribut existant de la input élément. [placeholder]="searchText" aura pour effet de lier la valeur de votre composant searchText champ de la composante du modèle input élément placeholder attribut.
    Oui, ce que @AndyLamb dit. Désolé j'ai juste vu cela de nouveau.

    OriginalL'auteur Plog

  2. 5

    En Composant TS fichier dont vous avez besoin pour définir <my-file-comp [user]="currentUser"></my-file-comp>

    my-file.component.ts
    public @Input() currentuser: string

@Component({
  selector : 'my-file-comp',
  template: `Test Value : {{user}}`
})
class MyFileComp{
   public @Input() user: string

}

@Component({
    selector: 'testcmp',
    template : `<my-file-comp [user]="currentUser"></my-file-comp>`,
})

class TestComp{
    currentUser: string = "I Am user"; //Need to pass variable from here to my file component inside it's template
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

    OriginalL'auteur Rohan Fating

  3. 1
    @Input() is used to import data from another component

Example get data in a-component.ts from b-component.ts
---------------------------------

receving data in user varibale :
a-component.ts
import { Component, Input } from '@angular/core';
@Input() user;



b-component.html
<my-file [user]="anyValue"></my-file>

or 

if you are repeating a loop :
<my-file @ngFor="let item of items" [user]="item"></my-file>
    C'est toujours une bonne idée d'expliquer comment ou pourquoi cela répond à la question. Il suffit de coller un bloc de code est généralement pas une réponse acceptable.

    OriginalL'auteur Naresh Singh

  4. 0

    Dans votre app.component.html

    <my-file [user]="currentUser"></my-file>

    Dans votre my-file.component.ts

    import {Input} from '@angular/core';

@Input() user;

    Après cela, vous pouvez utiliser currentUser de app.component dans le my-file.component

    OriginalL'auteur Volodymyr Khmil