Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Angular2] Problema ao fazer o Two Way Data Bind

Referente ao curso MEAN Stack: criando aplicações completas com Javascript, no capítulo Autenticação baseada em token e atividade JWT (JSON Web Token)

por Vinicius Roberto
| 100.2k xp | 19 posts
Analista de Sistemas Sênior

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
por Vinicius Roberto
| 100.2k xp | 19 posts
Analista de Sistemas Sênior

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?

por Tiago Nunes
| 115k xp | 3 posts
Programador

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

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

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? :)

por Vinicius Roberto
| 100.2k xp | 19 posts
Analista de Sistemas Sênior

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?

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Entendeu sim :)