boa tarde,
gostaria de entender melhor o ciclo de vida das variáveis passadas por componentes "@Input" .
pois na versão do angular que estou utilizando hj quando eu passo um Photo[] de um componente para outro eu exibo ele no html do componente q o recebeu, porem se eu usar o comando "console.log(photos);" me é retornado 0.
segue a declaração de ambos os componentes.
componente q envia o array:
import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo.service';
import { Photo } from '../photo';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-photo-list',
templateUrl: './photo-list.component.html',
styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {
photos : Photo[]= [];
constructor(
private activatedRoot : ActivatedRoute,
private photoService : PhotoService
){
}
ngOnInit(): void {
const usuario:string = this.activatedRoot.snapshot.params.userName;
this.photoService
.listFromUser(usuario)
.subscribe( fotos => this.photos = fotos );
}
}
<ap-photos [photos]="photos" ></ap-photos>
componente q recebe a lista:
import { Component, OnInit, Input } from '@angular/core';
import { Photo } from '../../photo';
@Component({
selector: 'ap-photos',
templateUrl: './photos.component.html',
styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnInit {
@Input() photos: Photo[] =[];
constructor() { }
ngOnInit() {
console.log("photos", this.photos);
}
}
html do componente q recebe a lista:
<img *ngFor="let foto of photos" [src]="foto.url" [alt]="foto.description" />
versão do angular e node:
npm: 6.9.0
angular/cli:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.1.1
Node: 10.16.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.801.1
@angular-devkit/core 8.1.1
@angular-devkit/schematics 8.1.1
@schematics/angular 8.1.1
@schematics/update 0.801.1
rxjs 6.4.0