Я новичок в Angular 4. Согласно моему пониманию, @Input используется для передачи значений компоненту. Но когда я использую это как упомянуто ниже, это не работает.
my-file.component.html
<h1 [user] = "currentuser"></h1>
my-file.component.ts
@Input()
user : string;
5 ответов
Это означает, что вы можете передать строковый ввод в сам компонент my-file, а не в любой элемент HTML (т.е. h1 в вашем случае) внутри самого компонента.
В родительском компоненте вы можете вызвать что-то вроде:
<my-file [user]="currentuser"></my-file>
Тогда это значение пользователя будет доступно для использования в вашем дочернем компоненте 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>
Ваше понимание само по себе неверно. Свойство @Input () используется для импорта данных из другого компонента. Например: этот другой компонент вы можете экспортировать, иначе он не будет работать.
В вашем 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
Похожие вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.