web-dev-qa-db-fra.com

@Input in Angular 4

Je suis nouveau dans Angular 4. Selon ma compréhension, @Input est utilisé 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;
angularinputangular2-templateangular2-components
3
Ramya

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

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

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

Ensuite, cette valeur d'utilisateur sera disponible pour être utilisée dans votre composant enfant my-file.

5
Plog

Dans le fichier Component TS, vous devez 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);
    }
}
5
Rohan Fating
@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>
1
Naresh Singh

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 à partir de app.component dans le my-file.component

0
Volodymyr Khmil