@ Input в Angular 4

Question

Я новичок в Angular 4. Согласно моему пониманию, @Input используется для передачи значений компоненту. Но когда я использую это как упомянуто ниже, это не работает.

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

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

angular input angular2-template angular2-components

4

Ramya 4 Сен 2017 в 18:39

Answer 1

Это означает, что вы можете передать строковый ввод в сам компонент my-file, а не в любой элемент HTML (т.е. h1 в вашем случае) внутри самого компонента.

В родительском компоненте вы можете вызвать что-то вроде:

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

Тогда это значение пользователя будет доступно для использования в вашем дочернем компоненте my-file.

5

Plog 4 Сен 2017 в 15:43

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);
    }
}

5

Rohan Fating 4 Сен 2017 в 15:46

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>

2

Naresh Singh 21 Ноя 2017 в 16:28

Answer 4

Ваше понимание само по себе неверно. Свойство @Input () используется для импорта данных из другого компонента. Например: этот другой компонент вы можете экспортировать, иначе он не будет работать.

0

Kishore Thangapandi 26 Авг 2019 в 05:19

Answer 5

В вашем app.component.html

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

В вашем my-file.component.ts

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

@Input() user;

После этого вы можете использовать currentUser из app.component в my-file.component

0

Volodymyr Khmil 30 Ноя 2017 в 21:33

@ Input в Angular 4

5 ответов

Похожие вопросы

Новые вопросы

angular