Angular 2: Как передать атрибуты дочернему компоненту?


В моем приложении у меня есть Home в качестве корневого компонента и еще один универсальный компонент с именем list, который я рендерингу внутри Home.

Я хочу передать данные в качестве свойства моему компоненту списка, который поступает из XMLHttpRequest.

Домой.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;
      });
  }
}

Список.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);
  }
}

Я получаю строковые данные из метода typeToDisplay() его Http-запрос и назначение переменной типа. но когда я передал как свойство компоненту списка, я получаю null в списке конструктор.

Я тоже пытался, но я получаю строку "type" таким же образом.

Надеюсь, мой вопрос ясен.
1 5

1 ответ:

Этот синтаксис

<List type="{{type}}"></List>

Задает свойство, а не атрибут.
Для установки атрибута используйте либо

<List attr.type="{{type}}"></List>

Или

<List [attr.type]="type"></List>

Если вы просто хотите иметь значение, доступное в List Используйте

@Input() type: any;

Вместо введения атрибута.
Таким образом, значение еще не доступно внутри конструктора, только в ngOnInit() или позже.