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

[Angular2] Problema ao fazer o Two Way Data Bind

Boa noite,

Estou com um problema que acredito que deve ser de conceito do Angular 2 que entendi errado.

Para seguir a aula de JWT precisei criar a tela de login

Então criei os arquivos: - login.component.ts - login.component.html - login.module.ts, que foi importado no AppModule - login.service.ts

LoginModule

import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';

@NgModule({
    declarations: [ LoginComponent ],
    exports: [ LoginComponent ],
    providers: [ LoginService ]
})
export class LoginModule { }

Me baseei em como funcionava o cadastro, porém ao utilizar o service, ele precisava estar como provider, por conta disse que criei o LoginModule

Enquanto esta no html puro ok, porém quando adiciono o Two Way Data Bind ele da erro Can't bind to 'ngModel' since it isn't a known property of 'input'

<input type="text" class="form-control" [(ngModel)]="usuario.login">

O que pode ser?

5 respostas

Na base da tentativa e erro consegui resolver.

Primeiro assim como o CadastroComponent, importei o LoginComponent no AppModule, então ele deu erro dizendo que não poderia estar nos dois lugares e sugeriu deixar apenas no AppModule. Fiz isso e funcionou =D!

Mas ainda fica minha dúvida em relação ao conceito do Module e a organização do Angular 2. Poderia me explicar por favor?

Durante o cursos em todos os modulos declarávamos e importávamos os components, porém esse foi diferente, apenas serviu para o poder utilizar o service e tive que declarar o component no modulo app.

EDIT: Melhorando a pergunta.. Porque nos outros declarei e exportei o component dentro do próprio modulo e no de login fiz no AppModule?

Você declarou a variável usuario na classe? Tipo public usuario: any = {};

solução!

Oi Vinicius. Vamos lá!

Primeiro de tudo, Angular 2 para funcionar precisa no mínimo do módulo principal da aplicação, aquele que é carregado primeiro. Os outros módulos o desenvolvedor cria se desejar. Quando ele quererá fazer isso? Bem, toda vez que ele detectar que aquela parte do sistema pode ser usada não só pelo módulo principal da aplicação, mas outras aplicações. A importação de um módulo é um atalho para que não tenhamos que importar na aplicação que deseja utilizar o módulo cada um dos componentes que fazem parte do módulo.

No curso de Angular 2,AppModule importava o FotoModule. Quando isso era feito, evitada de ter que importar FotoComponent e FotoService em AppModule individualmente. Veja que fazia sentido ter criado FotoModule, porque tudo que diz respeito à foto fica neste módulo. Já as páginas de cadastro , listagem e tals não são reutilizadas por vários sistemas, só dizem respeito à aplicação Alurapic. Por isso fizeram parte de AppModule e não um módulo exclusivo.

Consegui ajudar a clarear as ideias? :)

Conseguiu sim, já entendi melhor como funciona.

Então no meu caso ficou assim. AppModule importa LoginModule e declara LoginComponent.

LoginModule por sua vez tem como provider o LoginService

Quando coloquei o LoginComponent dentro de LoginModule não funcionou. Não entendi porque uma vez que faria mais sentido.

Porém pela sua explicação, como LoginModule não será reaproveitado no resto da aplicação, faz mais sentido eu excluir ele e deixar tanto o LoginComponent quanto o LoginService no AppModule.

Entendi certo?

Entendeu sim :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software