@Input in Angular 4

Question

我是Angular 4的新手.根据我的理解,@ 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>

然后,可以在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);
    }
}