Здесь обновление
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
Из шаблона ComponentA
visitor
проще всего сделать, если вы ожидаете значение для привязки visitor
в дочерних компонентах, - добавить проверку *ngIf
.
<app-visitor-component *ngIf="visitors.length" [visitors]="visitors"></app-visitor-component>
Это делает достоверную проверку значения visitors.length
, которое будет оцениваться как false
, пока сервисный вызов не вернет значение.
Также я бы порекомендовал вам переместить вызов службы в eventsService.view
в ngOnInit
из ComponentA
и выйти из конструктора. Это также облегчает тестирование ComponentA
.
Затем в дочернем компоненте для app-visitor
Из предыдущего ответа значение @Input () всегда неопределено
Это будет инициализироваться в
blockquote>ngOnInit
, а не в конструкторе. ( Ознакомьтесь также с документацией Angular Life Cycle Hooks . )Ваш код с использованием
OnInit
import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-visitor-component', templateUrl: '' }) export class ComponentAppVisitor implements OnInit { @Input() visitors: IVisitor[]; constructor() { } ngOnInit() { console.log(this.visitors); } }
Angular не делает доступными данные @Input
, как только создается компонент. То есть это не доступно во время constructor()
.
Если вы хотите отключить, когда @Input
действительно отправлено (и повторно отправлено), используйте NgOnChanges:
import { Component, Input, OnChanges } from @angular/core';
@Component({
selector: 'app-foo',
})
export class FooComponent implements OnChanges {
@Input() visitors: IVisitor[];
ngOnChanges() {
if (this.visitors) {
console.log(this.visitors)
// do something with this.visitors
}
}
}
В качестве альтернативы вы можете использовать getter / setters для запуска чего-либо, когда оно отправляется Angular :
private _visitors: IVisitor[];
@Input() public set visitors(val: IVisitor[]) {
this._visitors = val;
}
// Also, guarantee to always return an array
public get visitors(): IVisitor[] {
if (this._visitors) {
return this._visitors;
}
return [];
}