小编Hit*_*lar的帖子

Angular 2:如何将属性传递给子组件?

在我的应用程序中,我将Home作为根组件,另一个名为list的通用组件,我在Home中进行渲染.

我想将数据作为属性传递给我的列表组件,该组件来自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;
      });
  }
}
Run Code Online (Sandbox Code Playgroud)

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);
  }
}
Run Code Online (Sandbox Code Playgroud)

我从typeToDisplay()方法获取字符串数据,它是一个Http请求并分配给类型变量.但当我作为属性传递给列表组件时,我在List构造函数中得到null. …

javascript angular2-directives angular

5
推荐指数
1
解决办法
2223
查看次数

标签 统计

angular ×1

angular2-directives ×1

javascript ×1