1

Amigos quisiera que me puedan ayudar, todo lo que está en esa imagen esta en 1 componente y dentro utiliza otros componentes. Pero quisiera sacar el cuerpo en otro componente para tan solo agregar <app-cuerpo></app-cuerpo> me llame a toda su funcionalidad, pero cuando lo ingreso ya no se grafica

a comienzos estaba así: Kaypacha.component.html

<div fxLayout="column" fxFill class="base">
    <div *ngIf="!layout.isMobile && !loading" fxLayout="column" fxFill>
        <div fxLayout="row" style="height: 115px;">
            <div fxLayoutAlign="center start" fxLayout="column">
                <img src="assets/images/fc/modules/kaypacha/kaypacha_logo.png" style="height: 88px;">
                <div fxFlex style="padding-left: 15px;font-weight: bold;"><span>ASESOR: {{cabeceraConfig.nombre}}</span></div>
            </div>
            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                <div fxLayoutAlign="center center">
                    <img src="assets/images/fc/modules/kaypacha/copa.jpg" style="height: 115px;">
                </div>
                <div fxLayoutAlign="center center">
                    <img src="assets/images/fc/modules/kaypacha/personas.png" style="height: 115px;">
                </div>
                <div fxLayoutAlign="center center"  > 
                 
                    <img src="assets/images/fc/modules/kaypacha/ranking.png"   mat-button color="primary" class="bus-bot" (click)="showVarCard(0)" style="height: 115px;">
               
                </div>
                <div>
                    <mat-card class="pos-card" fxLayout="column" fxLayoutAlign="center center">
                        <span>Posición</span>
                        <span style="font-size: 28px; font-weight: bold;">{{cabeceraConfig.posicion}}</span>
                    </mat-card>
                </div>
                <div>
                    <button *ngIf="cabeceraConfig.boton" mat-button color="primary" class="bus-bot" (click)="openSearch()">
                        <span class="material-icons" style="font-size: 36px;">
                            switch_account
                        </span>
                    </button>
                </div>
            </div>
            <div fxLayoutAlign="center center">
                <img src="assets/images/fc/modules/kaypacha/fc.png" style="height: 115px; width: 190px;">
            </div>
        
        </div>    
      
          <div fxFlex fxLayout="column" style="padding-top: 10px;">
            <div fxLaout="row" >
                <div>
                    <app-preguntas-kaypacha [config]="preguntasConfig"></app-preguntas-kaypacha>
                </div>
                <div fxFlex fxLayout="column">
                    <div>
                        <app-puntaje-kaypacha [config]="puntajeConfig"></app-puntaje-kaypacha>
                    </div>
                    <div fxFlex style="padding-top: 12px;">
                        <app-desempenio-kaypacha [config]="desempenioConfig"></app-desempenio-kaypacha>
                    </div>
                </div>
            </div>
            <div fxFlex>
                <div style="max-height: 278px;height: 100%;">
                    <div fxFlex >
                        <app-dinamizadores-kaypacha [config]="dinamizadoresConfig"></app-dinamizadores-kaypacha>
                    </div>
                    <div fxFlex="40">
                        <app-bonos-kaypacha [config]="bonosConfig"></app-bonos-kaypacha>
                    </div>
                </div>
            </div>
        </div>    
      
    </div>
    <div *ngIf="!layout.isMobile && loading" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
        <img src="assets/images/fc/mis_wait.png" alt="" style="width: 120px;height: 120px;">
        <div><span>Cargando...</span></div>
    </div>
    <div *ngIf="layout.isMobile" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
        <img src="assets/images/fc/kaypacha1.png" alt="" style="width: 240px;height: 300px;">
        <span style="text-align: center;">Por el momento el módulo solo se puede visualizar correctamente en una PC/laptop.</span>
       
    </div>
</div>

Kaypacha.component.ts

export class KaypachaComponent implements OnInit, AfterContentInit {
Highcharts: typeof Highcharts = Highcharts;
loading: boolean = true;
cabeceraConfig:any;
preguntasConfig:any;
bonosConfig:any;
puntajeConfig:any;
desempenioConfig:any;
dinamizadoresConfig:any;

constructor(public layout: LayoutService, private ant: ModKaypachaService, 
        public dialog: MatDialog, public user: UserService) {

    }

ngAfterContentInit(): void {
        
    }

ngOnInit(): void {
this.cabeceraConfig=cloneDeep(cabeceraConfig); 
this.preguntasConfig=cloneDeep(preguntasConfig);
this.bonosConfig=cloneDeep(bonosConfig);
this.puntajeConfig=cloneDeep(puntajeConfig);
this.desempenioConfig=cloneDeep(desempenioConfig);
this.dinamizadoresConfig={i1:baseDinamizadoresConfig.line,i2:baseDinamizadoresConfig.line};
this.getServerData();

}

private getServerData(codBT?: string): void {
        this.loading = true;
        let profile = this.user.get('profile');
        this.ant.getDashboardData(codBT).subscribe(x => {
            let r = x.body.resultado;
            this.cabeceraConfig.nombre = r.bloq.col_nom;
            this.cabeceraConfig.posicion = onNullOrUndefined(r.bloq.rank, "--");
            if (!codBT && (r.pars.hab_bot == "1" || profile.tip_use == 0)) {
                this.cabeceraConfig.boton = true;
            }
            let d:string = r.pars.din_lis;
             
            if(!isNullOrUndefined(d)){
                let a:any = JSON.parse(d);
                a.forEach((x:any,i:number)=>{
                    let b:any;
                    if(x.type=="column"){
                        b = cloneDeep(baseDinamizadoresConfig.column);
                    }else {
                        b = cloneDeep(baseDinamizadoresConfig.line);
                    }
                    b.title=x.title;
                    b.options.colors[0]=x.color;
                    this.dinamizadoresConfig['i'+i]=b;
                });
            }
            console.log(r.his)
            this.setBloqConfig(this.preguntasConfig, r.bloq.bloq_par);
            this.setBloqConfig(this.bonosConfig, r.bloq.bloq_acum); 
            this.setHistConfig(this.desempenioConfig, r.his, "bloq_des");
            this.setHistConfig(this.dinamizadoresConfig, r.his, "bloq_din");
            this.puntajeConfig.anio = r.bloq.anio;
            r.his.forEach((v, i) => {
                this.puntajeConfig.hist[i] = v.punt;
            });
            this.puntajeConfig.hist[12] = onNullOrUndefined(r.bloq.punt_tot, '--');
            this.loading = false;
        });
    }

    private setHistConfig(base: any, cfg: any, key: string) {
        cfg.forEach((v: any, i: number) => {
            if (v[key]) {
                let co: any = JSON.parse(v[key]);
                Object.keys(base).forEach(k => {
                    if (co[k]) {
                        base[k]['hist'][i] = co[k];
                    }
                });
            }
        });
    }

     private setBloqConfig(base: any, cfg: any): void { 
         if (cfg) {
             let j = JSON.parse(cfg);
             Object.keys(j).forEach(k => {
                 base[k]['val'] = j[k];
             });
         }
     }

openSearch(): void {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.data = {
            showCloseBtn: true
        }; 
        const dialogRef = this.dialog.open(BuscadorKaypachaComponent, dialogConfig);
        dialogRef.afterClosed().subscribe(v => {
            if (v) { this.getServerData(v.cod_bt);
            }
        });
    }

}

lo que modifique

Kaypacha.component.html

<div fxLayout="column" fxFill class="base">
    <div *ngIf="!layout.isMobile && !loading" fxLayout="column" fxFill>
        <div fxLayout="row" style="height: 115px;">
            <div fxLayoutAlign="center start" fxLayout="column">
                <img src="assets/images/fc/modules/kaypacha/kaypacha_logo.png" style="height: 88px;">
                <div fxFlex style="padding-left: 15px;font-weight: bold;"><span>ASESOR: {{cabeceraConfig.nombre}}</span></div>
            </div>
            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                <div fxLayoutAlign="center center">
                    <img src="assets/images/fc/modules/kaypacha/copa.jpg" style="height: 115px;">
                </div>
                <div fxLayoutAlign="center center">
                    <img src="assets/images/fc/modules/kaypacha/personas.png" style="height: 115px;">
                </div>
                <div fxLayoutAlign="center center"  > 
                 
                    <img src="assets/images/fc/modules/kaypacha/ranking.png"   mat-button color="primary" class="bus-bot" (click)="showVarCard(0)" style="height: 115px;">
               
                </div>
                <div>
                    <mat-card class="pos-card" fxLayout="column" fxLayoutAlign="center center">
                        <span>Posición</span>
                        <span style="font-size: 28px; font-weight: bold;">{{cabeceraConfig.posicion}}</span>
                    </mat-card>
                </div>
                <div>
                    <button *ngIf="cabeceraConfig.boton" mat-button color="primary" class="bus-bot" (click)="openSearch()">
                        <span class="material-icons" style="font-size: 36px;">
                            switch_account
                        </span>
                    </button>
                </div>
            </div>
            <div fxLayoutAlign="center center">
                <img src="assets/images/fc/modules/kaypacha/fc.png" style="height: 115px; width: 190px;">
            </div>
        
        </div>
         <div fxFlex fxLayout="column" style="padding-top: 10px;">
            <app-panel></app-panel>
        </div>     
       
    </div>
    <div *ngIf="!layout.isMobile && loading" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
        <img src="assets/images/fc/mis_wait.png" alt="" style="width: 120px;height: 120px;">
        <div><span>Cargando...</span></div>
    </div>
    <div *ngIf="layout.isMobile" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
        <img src="assets/images/fc/kaypacha1.png" alt="" style="width: 240px;height: 300px;">
        <span style="text-align: center;">Por el momento el módulo solo se puede visualizar correctamente en una PC/laptop.</span>
        <!--<span style="text-align: center;">Pronto estará disponible la vista móvil. Gracias por su comprensión.</span>-->
    </div>
</div>

kaypacha.component.ts

import * as Highcharts from 'highcharts';
// import * as cloneDeep from 'lodash/cloneDeep';
import { AfterContentInit, Component, OnInit, ViewChild } from "@angular/core";
import { isNullOrUndefined, onNullOrUndefined } from "app/core/shared/functions.util";
import { LayoutService } from "app/system/admin/services/layout.service";
import { ModKaypachaService } from "./compartido/servicio/mod-kaypacha.service";
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { BuscadorKaypachaComponent } from './buscador/buscador.component';
import { UserService } from 'app/system/admin/services/user.service';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './kaypacha.util';
import { PanelComponent } from './panel/panel.component';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './panel/panel.util';
//import {  cabeceraConfig} from './panel/panel.util';
import {  cabeceraConfig,bonosConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig  } from './kaypacha.util';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
    selector: 'app-kaypacha',
    templateUrl: './kaypacha.component.html',
    styleUrls: ['./kaypacha.component.scss'],
    //providers: [DatePipe]
})
export class KaypachaComponent implements OnInit, AfterContentInit {
    //Highcharts: typeof Highcharts = Highcharts;
    loading: boolean = true;

    cabeceraConfig:any;
    
    @ViewChild(PanelComponent) panelComponent: PanelComponent;

    constructor(public layout: LayoutService,  public dialog: MatDialog,
        public router: Router,
        private activatedRoute: ActivatedRoute) {

    }

    ngAfterContentInit(): void {
        
    }

    ngOnInit(): void {
       
        const cabeceraConfig = {
            nombre: '--',
            posicion: '--',
            boton: false
        }; 
           this.cabeceraConfig=cabeceraConfig
           this.cabeceraConfig.boton = true;
           this.loading = false;
         
        
    } 

    openSearch(): void {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.data = {
            showCloseBtn: true
        }; 
        const dialogRef = this.dialog.open(BuscadorKaypachaComponent, dialogConfig);
        dialogRef.afterClosed().subscribe(v => {
            if (v) {
                this.panelComponent.getServerData(v.cod_bt)
                this.cabeceraConfig= this.panelComponent.cabeceraConfig 
           
            }
        });
    }
     

}

Cree un nuevo componente llamado Panel para colocar todo el cuerpo

panel.component.ts

<div fxFlex fxLayout="column" style="padding-top: 10px;">
    <div fxLaout="row" >
   <div>
            <app-preguntas-kaypacha [config]="preguntasConfig"></app-preguntas-kaypacha>
        </div>  
        <div fxFlex fxLayout="column">
              <div>
                <app-puntaje-kaypacha [config]="puntajeConfig"></app-puntaje-kaypacha>
            </div>  
            <div fxFlex style="padding-top: 12px;">
                <app-desempenio-kaypacha [config]="desempenioConfig"></app-desempenio-kaypacha>
            </div>
        </div>
    </div>
    <div fxFlex>
        <div style="max-height: 278px;height: 100%;">
            <div fxFlex >
                <app-dinamizadores-kaypacha [config]="dinamizadoresConfig"></app-dinamizadores-kaypacha>
            </div>
            <div fxFlex="40">
                <app-bonos-kaypacha [config]="bonosConfig"></app-bonos-kaypacha>
            </div>
        </div>
    </div> 
</div>

panel.component.ts

import * as Highcharts from 'highcharts';
import * as cloneDeep from 'lodash/cloneDeep';
import { AfterContentInit, Component, OnInit } from "@angular/core";
import { isNullOrUndefined, onNullOrUndefined } from "app/core/shared/functions.util";
import { LayoutService } from "app/system/admin/services/layout.service";
import { ModKaypachaService } from "../compartido/servicio/mod-kaypacha.service";
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { BuscadorKaypachaComponent } from '../buscador/buscador.component';
import { UserService } from 'app/system/admin/services/user.service';
import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './panel.util';
import { ActivatedRoute, Router } from '@angular/router';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from '../kaypacha.util'; 
@Component({
    selector: 'app-panel',
    templateUrl: './panel.component.html',
    styleUrls: ['./panel.component.scss'],
    //providers: [DatePipe]
})
export class PanelComponent implements OnInit, AfterContentInit {
    Highcharts: typeof Highcharts = Highcharts;
    loading: boolean = true;

    cabeceraConfig:any;
    preguntasConfig:any;
    bonosConfig:any;
    puntajeConfig:any;
    desempenioConfig:any;
    dinamizadoresConfig:any;

    constructor(public layout: LayoutService, private ant: ModKaypachaService, 
        public dialog: MatDialog, public user: UserService,
        public router: Router,
    private activatedRoute: ActivatedRoute) {

    }

    ngAfterContentInit(): void {
        
    }

    ngOnInit(): void { 
        this.cabeceraConfig=cloneDeep(cabeceraConfig);
        this.preguntasConfig=cloneDeep(preguntasConfig);
        this.bonosConfig=cloneDeep(bonosConfig);
        this.puntajeConfig=cloneDeep(puntajeConfig);
        this.desempenioConfig=cloneDeep(desempenioConfig);
        console.log(this.desempenioConfig)
        this.dinamizadoresConfig={i1:baseDinamizadoresConfig.line,i2:baseDinamizadoresConfig.line};
        this.getServerData();

           
    }

      public getServerData(codBT?: string): void {
        this.loading = true;
        let profile = this.user.get('profile');
        this.ant.getDashboardData(codBT).subscribe(x => { 
            let r = x.body.resultado;
            this.cabeceraConfig.nombre = r.bloq.col_nom;
            this.cabeceraConfig.posicion = onNullOrUndefined(r.bloq.rank, "--");
            if (!codBT && (r.pars.hab_bot == "1" || profile.tip_use == 0)) {
                this.cabeceraConfig.boton = true;
            }
            let d:string = r.pars.din_lis;  
            if(!isNullOrUndefined(d)){ 
                let a:any = JSON.parse(d);
                a.forEach((x:any,i:number)=>{
                    let b:any; 
                    if(x.type=="column"){
                        b = cloneDeep(baseDinamizadoresConfig.column); 
                    }else {
                        b = cloneDeep(baseDinamizadoresConfig.line);
                    }
                    b.title=x.title;
                    b.options.colors[0]=x.color;
                    this.dinamizadoresConfig['i'+i]=b; 
                });
            }   
            this.setBloqConfig(this.preguntasConfig, r.bloq.bloq_par);
            this.setBloqConfig(this.bonosConfig, r.bloq.bloq_acum);  
            this.setHistConfig(this.desempenioConfig, r.his, "bloq_des"); 
            this.setHistConfig(this.dinamizadoresConfig, r.his, "bloq_din");
           console.log(this.desempenioConfig)
            this.puntajeConfig.anio = r.bloq.anio; 
            r.his.forEach((v, i) => {
                this.puntajeConfig.hist[i] = v.punt;
            });
            this.puntajeConfig.hist[12] = onNullOrUndefined(r.bloq.punt_tot, '--'); 
            this.loading = false;
        });
    }

    public setHistConfig(base: any, cfg: any, key: string) { 
        cfg.forEach((v: any, i: number) => {
            if (v[key]) {
                let co: any = JSON.parse(v[key]);  
                Object.keys(base).forEach(k => {
                    if (co[k]) {  
                        base[k]['hist'][i] = co[k];
                    }
                });
            }
        });
    }

    public setBloqConfig(base: any, cfg: any): void { 
        if (cfg) {
            let j = JSON.parse(cfg); 
            Object.keys(j).forEach(k => { 
                base[k]['val'] = j[k]; 
            });
        }
    }
 
    showVarCard(i: number) {
        if (this.layout.isMobile) {
          //this.incentivos2.setCardData(i);
          //this.router.navigateByUrl('variable', { relativeTo: this.activatedRoute,skipLocationChange: true });
          this.router.navigate(['./ranking'], {relativeTo: this.activatedRoute,skipLocationChange: true});   
        }
      }
    

}

Kaypacha.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FlexLayoutModule } from "@angular/flex-layout";
import { FormsModule } from "@angular/forms";
import { SharedCWCModule } from "app/core/screen/components/shared-cwc.module";
import { SharedMaterialModule } from "app/core/screen/components/shared-material.module";
//import { SharedPrimengModule } from "app/core/screen/components/shared-primeng.module";
import { SharedCMCModule } from "../shared/components/shared-cmc.module";
import { KaypachaRoutingModule } from "./kaypacha-routing.module";
import { KaypachaComponent } from "./kaypacha.component";
import { PreguntasKaypachaComponent } from "./preguntas/preguntas.component";
import { PuntajeKaypachaComponent } from "./puntaje/puntaje.component";
import { DesempenioKaypachaComponent } from './desempenio/desempenio.component';
import { DinamizadoresKaypachaComponent } from './dinamizadores/dinamizadores.component';
import { BonosKaypachaComponent } from './bonos/bonos.component';
import { HighchartsChartModule } from "highcharts-angular";
import { ModKaypachaService } from "./compartido/servicio/mod-kaypacha.service";
import { BuscadorKaypachaComponent } from './buscador/buscador.component';
import { PanelComponent } from "./panel/panel.component";
import { RankingComponent } from "./ranking/ranking.component";

@NgModule({
    imports: [
        KaypachaRoutingModule,
        CommonModule,
        FormsModule,
        FlexLayoutModule,
        SharedMaterialModule, 
        SharedCWCModule,
        SharedCMCModule,
        HighchartsChartModule
    ],
       declarations: [PanelComponent,KaypachaComponent, PreguntasKaypachaComponent, PuntajeKaypachaComponent,
            DesempenioKaypachaComponent, DinamizadoresKaypachaComponent, BonosKaypachaComponent, 
            BuscadorKaypachaComponent,RankingComponent], 
    providers: [ModKaypachaService]
})
export class KaypachaModule { }

introducir la descripción de la imagen aquí

Kaypacha-routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { KaypachaComponent } from "./kaypacha.component";
import { PanelComponent } from "./panel/panel.component";
import { RankingComponent } from "./ranking/ranking.component";

const routes: Routes = [
    {
        path:'',
        component:KaypachaComponent,
        //component:PanelComponent,
        data: {title:'Kaypacha'},
        children: [ 
            {
                path:'ranking',
                component: RankingComponent
            } 
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class KaypachaRoutingModule { }

Panel.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FlexLayoutModule } from "@angular/flex-layout";
import { FormsModule } from "@angular/forms";
import { SharedCWCModule } from "app/core/screen/components/shared-cwc.module";
import { SharedMaterialModule } from "app/core/screen/components/shared-material.module";
//import { SharedPrimengModule } from "app/core/screen/components/shared-primeng.module";
//import { SharedCMCModule } from "../shared/components/shared-cmc.module";
//import { KaypachaRoutingModule } from "./kaypacha-routing.module";
//import { KaypachaComponent } from "./kaypacha.component";
import { PreguntasKaypachaComponent } from "../preguntas/preguntas.component";
import { PuntajeKaypachaComponent } from "../puntaje/puntaje.component";
//import { DesempenioKaypachaComponent } from '../desempenio/desempenio.component';
import { DinamizadoresKaypachaComponent } from '../dinamizadores/dinamizadores.component';
import { BonosKaypachaComponent } from '../bonos/bonos.component';
import { HighchartsChartModule } from "highcharts-angular";
import { ModKaypachaService } from "../compartido/servicio/mod-kaypacha.service";
import { BuscadorKaypachaComponent } from '../buscador/buscador.component';
import { PanelRoutingModule } from "./panel-routing.module";
import { PanelComponent } from "./panel.component";
import { SharedCMCModule } from "app/modules/shared/components/shared-cmc.module";
import { KaypachaComponent } from "../kaypacha.component";
import { DesempenioKaypachaComponent } from "../desempenio/desempenio.component";

@NgModule({
    imports: [
        PanelRoutingModule,
        CommonModule,
        FormsModule,
        FlexLayoutModule,
        SharedMaterialModule, 
        SharedCWCModule,
        SharedCMCModule,
        HighchartsChartModule
    ],
      declarations: [ 
          PanelComponent, PreguntasKaypachaComponent, 
          PuntajeKaypachaComponent,
         DesempenioKaypachaComponent, DinamizadoresKaypachaComponent, 
        BonosKaypachaComponent, BuscadorKaypachaComponent,KaypachaComponent],
     
    providers: [ModKaypachaService]
})
export class PanelModule { }

panel-routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { PanelComponent } from "./panel.component"; 

const routes: Routes = [
    {
        path:'',
        component:PanelComponent,
        data: {title:'Kaypacha'}
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class PanelRoutingModule { }

app-routing.module.ts

  const routes: Routes = [
      {
        path: '',
        redirectTo: 'session/signin',
        pathMatch: 'full'
      },
      {
        path: '',
        component: AuthLayoutComponent,
        children: [
          {
            path: 'session',
            loadChildren: () => import('./system/session/session.module').then(m => m.SessionModule),
            data: { title: 'Session' }
          }
        ]
      },
      {
        path: 'login',
        canActivate: [LoginGuard],
        component: LoginComponent
      },
      {
        path: 'app',
        redirectTo: 'app/desktop',
        pathMatch: 'full'
      },
      {
        path: 'app',
        canActivate: [AuthGuard], 
        component: AdminLayoutComponent,
        children: [
          {
            path: 'desktop',
            component: DesktopComponent,
            data: { title: 'Desktop' }
          },
          {
            path: 'reportes',
            loadChildren: () => import('app/modules/reportes/rep01.module').then(m => m.Rep01Module),
            data: { title: 'Reportes' }
          } 
          {
            path: 'kaypacha', 
            loadChildren: () => import('app/modules/kaypacha/kaypacha.module').then(m => m.KaypachaModule),
            data: { title: 'Kaypacha' }
          }
        ]
      },
    ];
    
    @NgModule({ 
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { } 
13
  • 2
    Hola, necesitas ser un poco más explicito. Donde pusiste tu componente nuevo cuerpo? Lo agregaste al app.modules? Ó al modulo donde lo quieres llamar?
    – Legna
    el 18 oct. 2022 a las 20:02
  • 1
    podrías mostrar el enrutamiento y también la arquitectura modular los módulos que usas
    – nestdan
    el 18 oct. 2022 a las 20:03
  • 1
    no veo las rutas....la consola que error te da
    – nestdan
    el 18 oct. 2022 a las 21:02
  • 2
    en las rutas me refiero a app-routing.module.ts
    – nestdan
    el 18 oct. 2022 a las 21:03
  • 1
    Si mejor importas tu proyecto en stackblitz y nos compartes?... el 18 oct. 2022 a las 23:59

1 respuesta 1

1

Bueno investigando encontre un decorador @Input que manda datos del padre al hijo así que en método que generaba el padre y obtenia los datos tuve que crear varios decoradores @Input y pasarle la data, quedaria así, cabe resaltar que no se si está bien o se puede mejorar:

Kaypacha.component.ts (Padre)

recibidodesempeno: any;
recibidopregunta: any;
recibidopuntajeConfig: any;
recibidobonosConfig: any;
recibidodinamizadoresConfig: any; 

Public getServerData(codBT?: string): void {
this.recibidodesempeno=this.desempenioConfig   
this.recibidopregunta=this.preguntasConfig   
this.recibidopuntajeConfig=this.puntajeConfig
this.recibidobonosConfig=this.bonosConfig
this.recibidodinamizadoresConfig=this.dinamizadoresConfig 

}

Kaypacha.Component.html (Padre)

<div fxFlex fxLayout="column" style="padding-top: 10px;"> 
            <app-panel 
                [recibidopregunta]="recibidopregunta" 
                [recibidodesempeno]="recibidodesempeno"   
                [recibidopuntajeConfig]="recibidopuntajeConfig" 
                [recibidobonosConfig]="recibidobonosConfig"
                [recibidodinamizadoresConfig]="recibidodinamizadoresConfig"
            >
           
            </app-panel>   

Panel.component.ts(Hijo)

Agregue los decoradores

@Input() recibidodesempeno: any;
     @Input() recibidopregunta: any;
     @Input() recibidopuntajeConfig :any;
     @Input() recibidobonosConfig:any
     @Input() recibidodinamizadoresConfig:any;

public ngOnInit(): void { 
if(this.recibidopregunta ==null){
            this.preguntasConfig=cloneDeep(preguntasConfig);
            
        }
        else { 
            this.preguntasConfig=this.recibidopregunta
        }
        if(this.recibidopuntajeConfig == null){
            this.puntajeConfig=cloneDeep(puntajeConfig);
        }
        else{
            this.puntajeConfig=this.recibidopuntajeConfig
        }
        if(this.recibidobonosConfig==null){
            this.bonosConfig=cloneDeep(bonosConfig);
        }
        else{
            this.bonosConfig=this.recibidobonosConfig
        }
        if(this.recibidodinamizadoresConfig==null){
            this.dinamizadoresConfig={i1:baseDinamizadoresConfig.line,i2:baseDinamizadoresConfig.line};
        }
        else
        {
            this.dinamizadoresConfig=this.recibidodinamizadoresConfig
        } 
       
        this.desempenioConfig=this.recibidodesempeno  
}
9
  • 1
    si es una forma de comunicación podes mirar :developinginspanish.com/2018/05/19/… y tutorialesprogramacionya.com/angularya/…
    – nestdan
    el 19 oct. 2022 a las 15:43
  • @nestdan mil gracias , me recomiendas algún libro o vídeo para aprender desde 0
    – PieroDev
    el 19 oct. 2022 a las 16:28
  • @nestdan como se puede hacer para cuando haga clic el cuerpo cambie es decir cambie de componente a otro componente
    – PieroDev
    el 19 oct. 2022 a las 16:35
  • 1
    para manejar rutas se usa routerLink desde la vista para cada ruta especifica no se si te referís a esto ? Si hay un tutorial web completo desde 0 de Academia Binaria la parte de rutas -->academia-binaria.com/paginas-y-rutas-angular-spa
    – nestdan
    el 19 oct. 2022 a las 20:00
  • 1
    en cuanto a libros ng-book de Nate Murray según la versión lo podes descargar free y codigo en github Tambien como inicial inicial el gran libro de angular de Oriols
    – nestdan
    el 19 oct. 2022 a las 20:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.