最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular 2: how to pass attributes to child component? - Stack Overflow

programmeradmin1浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 7

This 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.

发布评论

评论列表(0)

  1. 暂无评论