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 ответ:
Этот синтаксис
<List type="{{type}}"></List>
Задает свойство, а не атрибут.
Для установки атрибута используйте либо<List attr.type="{{type}}"></List>
Или
<List [attr.type]="type"></List>
Если вы просто хотите иметь значение, доступное в
List
Используйте@Input() type: any;
Вместо введения атрибута.
Таким образом, значение еще не доступно внутри конструктора, только вngOnInit()
или позже.