Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

comigo não funcionou

comigo não funcionou.

@Input() url;
@Input() titulo;

no html renderizava como null e undefined.

depois eu mudei para:

@Input() src;
@Input() alt;

e passou a funcionar.

6 respostas

Você precisa postar o código que envolve essa alteração. Se funcionou com sua última alteração, é porque não há uma paridade no nome da propriedade no componente e em seu template. Os depois têm que ter o mesmo nome.

wow. vc é rápido heim. Muito bom.

vou refazer aqui e já envio o código...

Faça sim, só relembrando:

@Input() url;
@Input() titulo;

Isso indica que seu componente pode receber valor nas propriedades url titulo. Por exemplo:

<meu-componente url="xxx" titulo="yyy">

Agora, no template do seu componente, você pode usar esses valores recebidos para alimentar a propriedade HTML de qualquer tag. Por exemplo, no template de meu-component você pega o url e atribuí ao src, pega o titulo e atribui ao alt.

Por fim, é importante frisar que o @input é uma maneira de podemos nos comunicar com o componente, passar valores para ele e esses valores podem ser usado por seu template. (template do componente).

<!-- foto.component.ts -->
import {Component, Input} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'foto',
    templateUrl: './foto.component.html',

})
export class FotoComponent{
    @Input() url;
    @Input() alt;
}


<!-- foto.component.html -->
<img class="img-responsive center-block" [src]="url" alt="{{alt}}">


<!-- index.html -->
<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="container">
   <foto src="img/leao.jpg" alt="Leão"></foto>
   <foto src="img/leao-branco.jpg" alt="Leão Branco"></foto>
</div>


<!-- html renderizado -->
<foto alt="Leão" src="img/leao.jpg" ng-reflect-alt="Leão">
<img class="img-responsive center-block" src="null" ng-reflect-alt="Leão" alt="Leão">
</foto>

Na aula, eu crio o template de FotoComponent assim:

<!-- alurapic/client/app/foto/foto.component.html -->
<img class="img-responsive center-block" [src]="url" [alt]="titulo">

Esse template indica FotoCompoent recebe do muito externo os dados url e titulo. Sendo assim, o componente precisa ter os @Inputurletitulo`.

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'foto',
    templateUrl: './foto.component.html'
})
export class FotoComponent {

    @Input() titulo;
    @Input() url;
}

Veja que há uma paridade nos valores. No seu código, você usou @Input() alt, quando na verdade é @Input() titulo para coincidir com a propriedade titulo no template.

Você pode dar o nome que quiser, contanto que haja uma paridade no valor da propriedade no componente, inclusive em seu template.

solução!

Com relação a propriedade titulo, está funcionando e não voltei ao original. Apenas src com url pra te mostrar. Se eu voltar a usar src com src volta a funcionar comigo.

Mas não tem problema. Não é um problema que está me impedindo de seguir adiante. Era só uma dúvida mesmo.

Talvez tenha a ver com a versão do angular na minha máquina. Talvez essa versão seja obrigatório o nome da propriedade da classe ser igual a propriedade no html. no caso src e src.

Obrigado.