@Input in Angular 4

Question

我是 Angular 4.As 的新手，根据我的理解，@Input 用于将值传递给组件。但是当我如下所述使用它时，它不起作用。

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

my-file.component.ts
    @Input() 
    user : string;

Answer 1

这意味着您可以将字符串输入传递到您的 my-file 组件本身，而不是组件本身内的任何 HTML 元素（即您的情况下的 h1）。

即在父组件中你可以这样调用：

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

然后 user 的这个值将可以在你的 my-file 子组件中使用。

Answer 2

在组件 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);
    }
}

Answer 3

@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>

Answer 4

在你的app.component.html

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

在你的my-file.component.ts

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

@Input() user;

之后您可以在 my-file.component

中使用 app.component 中的 currentUser

Answer 5

你的理解本身就是错误的。 @Input() 属性用于从另一个组件导入数据。例如：您也可以导出另一个组件，否则它将无法工作。

@Input in Angular 4

@Input in Angular 4

input

angular2-template

angular2-components

angular