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

Uso Cruzado de componentes

Olá tenho uma aplicação com a seguinte estrutura

app/canal/canal.cadastro.component.ts

app/empresa/empresa.listagem.component

No CanalCadastroComponent é necessário uma listagem de empresas para um combobox que é obtida do servidor pelo EmpresaListagemComponent conforme os códigos abaixo.

Estou obtendo o erro "Error:TS2346:Supplied parameters do not match any signature of call target." no arquivo app/canal/canal.cadastro.component.ts na linha empresaLisagem: EmpresaListagemComponent = new EmpresaListagemComponent();

Alguma sugestão/idéia ?

app/empresa/empresa.listagem.component

import {Component} from "@angular/core";
import {SkambauService} from "../skambau/skambau.service";
import {Empresa} from "./empresa.component";

@Component({
    moduleId: module.id,
    selector: 'empresa-listagem',
    templateUrl: 'empresa.listagem.component.html'
})
export class EmpresaListagemComponent {

    empresas: Empresa[] = [];

    constructor(skambau: SkambauService) {
        skambau.empresaListagem()
            .subscribe(
                empresas => this.empresas = empresas,
                erro => console.log(erro)
            );
    }
}

app/canal/canal.cadastro.component.ts

import {Component} from "@angular/core";
import {Canal} from "./canal.component";
import {EmpresaListagemComponent} from "../empresa/empresa.listagem.component";

@Component({
    moduleId: module.id,
    selector: 'canal-cadastro',
    templateUrl: 'canal.cadastro.component.html'
})
export class CanalCadastroComponent {

    canal: Canal = new Canal();
    empresaLisagem: EmpresaListagemComponent = new EmpresaListagemComponent();

}

app/app.modules.ts

import "rxjs/add/operator/map";
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {FotoModule} from "./foto/foto.module";
import {HttpModule} from "@angular/http";
import {PainelModule} from "./painel/painel.module";
import {CadastroComponent} from "./cadastro/cadastro.component";
import {ListagemComponent} from "./listagem/listagem.component";
import {routing} from "./app.routes";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MenuComponent} from "./menu/menu.component";
import {ApelidoDirective} from "./diretivas/apelido.directive";
import {CommonModule} from "@angular/common";
import {BlockUIModule} from "primeng/components/blockui/blockui";
import {Canal} from "./canal/canal.component";
import {CanalCadastroComponent} from "./canal/canal.cadastro.component";
import {SkambauService} from "./skambau/skambau.service";
import {Empresa} from "./empresa/empresa.component";
import {EmpresaListagemComponent} from "./empresa/empresa.listagem.component";
import {EmpresaCadastroComponent} from "./empresa/empresa.cadastro.component";

@NgModule({
    imports: [
        BlockUIModule,
        BrowserModule,
        CommonModule,
        FormsModule,
        FotoModule,
        HttpModule,
        PainelModule,
        ReactiveFormsModule,
        routing],
    declarations: [
        AppComponent,
        CadastroComponent,
        ListagemComponent,
        MenuComponent,
        Empresa,
        EmpresaListagemComponent,
        EmpresaCadastroComponent,
        Canal,
        CanalCadastroComponent,
        ApelidoDirective
    ],
    providers: [
        SkambauService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
9 respostas

Oi André, você esta instanciando a classe EmpresaListagemComponent manualmente sem passar sua dependencia no construtor. Aliás, mesmo que passasse você estaria infringindo o framework porque ela deveria ser injetada.

Você fez o curso pré-requisito do curso que é o do Javascript avançado? Se fez ignore o que vou falar a seguir.

Você terá dificuldades no curso de Angular sem esse curso. Inclusive nele explico construtor e outros conceitos que o ajudariam a descobrir o problema do seu código ou até evitar que ele acontecesse.

Vale a pena fazer o curso.

Sucesso e bom estudo André.

Olá Flávio, obrigado pela pronta resposta. Então na classe EmpresaListagemComponent posso utilizar mais de um decorator (@Component e @Injectable) ?

Obrigado pela sugestão do curso, vou deixar de ser teimoso e fazer neste final de semana. Como pode observar sou júnior em Javascript, meu conhecimento mais sólido é em Java e C++ .

Aproveitando a oportunidade acho que um terceiro curso de Angular 2 (autenticação de usuários, performance/cache, entre outros) seria muito interessante pois pelo que verifiquei o framework tem um excelente potencial para aplicações corporativas. Estou fazendo um exercício com ele como um backoffice de commerce.

EmpresaListagemComponent ê um @Component, não tinha me tocado nisso.

Porque você não usou o selector de EmpresaListagemComponent no template de CanalCadastroComponent? Daí você conseguiria exibir o componente dentro de outro.

O que acha ? É isso que você quer? Dai você remove a dependência de EmpresaListagemComponent em CanalCadastroComponent.

Tem um tal de Canal que está com o mesno problema.

solução!

Se CanalCadastroComponent só precisa da lista então você injeta SkambauService nele e não EmpresaListagemComponent e esta tudo resolvido. Serviços existem para compartilhar código conum entre componentes.

Exato Flávio foi esta a abordagem que adotei injetei o serviço ao invés do componente. Pois o objetivo deste serviço é obter uma lista de empresas para o cliente atribuir ao canal de vendas.

Então, só para me situar. Resolveu então? :)

Sim resolveu ficou ótimo assim. Minha abordagem anterior estava querendo obter a listagem de empresas na classe CanalCadastroComponent a partir do método implementado no EmpresaListagemComponent. Porém como são só 4 linhas deixei o CanalCadastroComponent obter do serviço conforme sua sugestão.

Muito obrigado pela atenção Flávio.

Excelente! Agora, fica aquele convite de você me encontrar no curso de JavaScript avançado que é pré-requisito do de Angular. Se não fizer, você se tornará um ninja em Angular, se fizer, se tornará um cangaceiro! Entre ninja e cangaceiro, eu aposto no cangaceiro :)

Sucesso e bom estudo André!