我是Angular 4.的新手,因为根据我的理解,@input用于将值传递给组件。但是,当我使用如下提到的情况下,它不起作用。
my-file.component.html
<h1 [user] = "currentuser"></h1>
my-file.component.ts
@Input()
user : string;
这意味着您可以将字符串输入传递到组件本身内的my文件组件本身不是任何HTML元素(即H1)。
即。在父组件中,您可以调用类似:
<my-file [user]="currentuser"></my-file>
那么,将在您的文件子组件中使用此用户值。
在组件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);
}
}
@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>
在您的app.component.html
<my-file [user]="currentUser"></my-file>
在您的my-file.component.ts
import {Input} from '@angular/core';
@Input() user;
之后,您可以在my-file.component
currentUser
的CC_4您的理解本身是错误的。@input()属性用于从另一个组件导入数据。例如:您也可以导出另一个组件,否则它将不起作用。