admin管理员组文章数量:1325713
In my application I have Home as root ponent and another generic ponent named as list which i'm rendering inside Home.
I want to pass data as property to my list ponent which is ing from XMLHttpRequest.
home.ts
import {Component} from 'angular2/core';
import {DashboardService} from '../../services/dashboard';
import {List} from '../contact/list';
@Component({
selector: 'home',
template:
`
<h3>Home</h3>
<List type="{{type}}"></List>
`
providers: [DashboardService],
directives: [List],
})
export class Home {
private _type: any;
constructor(private _dashboardService: DashboardService) {
this._dashboardService.typeToDisplay()
.subscribe((type) => {
this._type = type;
});
}
}
List.ts
@Component({
selector: 'List',
properties: ['type'],
template: `
<h2>list</h3>
`,
providers: [DashboardService]
})
export class List {
private type: any;
constructor(@Attribute('type') type:string) {
this.type = type;
console.log(type);
}
}
I'm getting string data from typeToDisplay() method its an Http request & assigning to type variable. but when I passed as property to list ponent I'm getting null in List constructor.
I tried too but i'm getting "type" string same way.
Hope my question is Clear.
In my application I have Home as root ponent and another generic ponent named as list which i'm rendering inside Home.
I want to pass data as property to my list ponent which is ing from XMLHttpRequest.
home.ts
import {Component} from 'angular2/core';
import {DashboardService} from '../../services/dashboard';
import {List} from '../contact/list';
@Component({
selector: 'home',
template:
`
<h3>Home</h3>
<List type="{{type}}"></List>
`
providers: [DashboardService],
directives: [List],
})
export class Home {
private _type: any;
constructor(private _dashboardService: DashboardService) {
this._dashboardService.typeToDisplay()
.subscribe((type) => {
this._type = type;
});
}
}
List.ts
@Component({
selector: 'List',
properties: ['type'],
template: `
<h2>list</h3>
`,
providers: [DashboardService]
})
export class List {
private type: any;
constructor(@Attribute('type') type:string) {
this.type = type;
console.log(type);
}
}
I'm getting string data from typeToDisplay() method its an Http request & assigning to type variable. but when I passed as property to list ponent I'm getting null in List constructor.
I tried too but i'm getting "type" string same way.
Hope my question is Clear.
Share Improve this question asked Jan 21, 2016 at 6:41 Hitesh BalarHitesh Balar 1813 silver badges13 bronze badges1 Answer
Reset to default 7This syntax
<List type="{{type}}"></List>
is setting a property not an attribute.
To set an attribute use either
<List attr.type="{{type}}"></List>
or
<List [attr.type]="type"></List>
If you just want to have the value available in List
use
@Input() type: any;
instead of the attribute injection.
This way the value is not availabe yet inside the constructor, only in ngOnInit()
or later.
本文标签: javascriptAngular 2 how to pass attributes to child componentStack Overflow
版权声明:本文标题:javascript - Angular 2: how to pass attributes to child component? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742195503a2431004.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论