@Input in Angular 4



我是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()属性用于从另一个组件导入数据。例如:您也可以导出另一个组件,否则它将不起作用。

相关内容

  • 没有找到相关文章

最新更新