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.
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.
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 @Input
urle
titulo`.
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.
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.