Quando tento manipular uma variável anotada com @Input() no método de inicialização do componente ngOnInit() ocorre que esta encontra-se indefinida (undefined). Tenho êxito ao mover essa rotina de manipulação para ngOnChanges() do tipo OnChanges. Minha dúvida é: Como isso foi possível na vídeo aula utilizando o método ngOnInit()
Boa tarde, Guilherme! Como vai?
Qual versão do Angular vc está utilizando? Para ter a resposta para essa pergunta, entre na pasta do seu projeto através do terminal do seu sistema operacional e execute o comando ng version. Por favor, cole aqui a saída do comando para eu poder dar uma olhada e tentar te ajudar!
Grande abraço e bons estudos, meu aluno!
Este é o resultado para a execução do comando ng version:
Angular CLI: 7.3.8
Node: 10.15.0
OS: win32 x64
Angular: 7.2.14 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router
Package Version
@angular-devkit/architect 0.13.8
@angular-devkit/build-angular 0.13.8
@angular-devkit/build-optimizer 0.13.8
@angular-devkit/build-webpack 0.13.8
@angular-devkit/core 7.3.8
@angular-devkit/schematics 7.3.8
@angular/cli 7.3.8
@ngtools/webpack 7.3.8
@schematics/angular 7.3.8
@schematics/update 0.13.8
rxjs 6.3.3
typescript 3.2.4 webpack 4.29.0
Boa noite, Guilherme! Como vai?
Pergunta importante: que tipo de informação vc está tentando passar para a propriedade decorada com o @Input()?
Bom dia, Gabriel.
O que está sendo passado para esta propriedade é um array do tipo Photo:
export interface Photo {
description: string;
url: string;
}Este array é criado em uma classe que implementa Resolve<Observable<Photo[]>> que, por sua vez, recebe por injeção um serviço que realiza uma requisição HTTP. Como é de se esperar, é recebido um ActivatedRouteSnapshot contendo parte da path da requisição (neste caso userName) usado pela requisição:
//RESOLVER
@Injectable({
providedIn: 'root'
})
export class PhotoListResolver implements Resolve<Observable<Photo[]>>{
constructor(private service: PhotoService){}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo[]> {
const userName = route.params.userName;
return this.service.listFromUser(userName);
}
}
//HTTP REQUEST SERVICE
const API = 'http://localhost:3000/';
@Injectable({
providedIn: 'root'
})
export class PhotoService{
constructor(private http: HttpClient){}
listFromUser(userName: string){
return this.http.get<Photo[]>(API + userName);
}
}O código fonte do projeto pode ser encontrado no seguinte repositório: https://github.com/splait/angular-course