web-dev-qa-db-ja.com

@Input in Angular 4

私はAngularを初めて使用しました。4。私の理解によると、@ Inputはコンポーネントに値を渡すために使用されます。

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

my-file.component.ts
    @Input() 
    user : string;
angularinputangular2-templateangular2-components
4
Ramya

これは、コンポーネント自体内のHTML要素（つまり、あなたの場合はh1）ではなく、my-fileコンポーネント自体に文字列入力を渡すことができることを意味します。

つまり、親コンポーネントで次のように呼び出すことができます。

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

その後、このuserの値は、my-file子コンポーネント内で使用できるようになります。

5
Plog

コンポーネントTSファイルで、<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

あなたの理解自体が間違っています。 @Input（）プロパティは、別のコンポーネントからデータをインポートするために使用されます。例：エクスポートできる別のコンポーネントもそうでなければ機能しません。

0
Kishore Thangapandi

app.component.html

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

my-file.component.ts

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

@Input() user;

その後、app.componentでmy-file.componentのcurrentUserを使用できます

0
Volodymyr Khmil