0

cronometro.html

<div>
  <button  (click)="start()" >Empezar</button>
  <button (click)="lapso()">Lapso</button>
  <button (click)="stop()">Parar</button>

</div>

<div>
  <p>{{hora}} : {{minuto}} : {{segundos}}</p>
  <p *ngFor="let cole of coleccion">{{cole.hora}} : {{cole.minuto}} : {{cole.segundos}}</p>

cronometro.ts

import {Component} from '@angular/core';

@Component ({
  selector: 'cronometro',
  templateUrl: 'app/app.html'
})

export class cronometro{

}
</div>

app.component.ts

  import { Component } from '@angular/core';
import {cronometro} from '../app/cronometro';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.html',
  directives: [cronometro]

})
export class AppComponent {
  title = 'app';
//creacion de variables
  public hora:number = 0;
  public minuto:number = 0;
  public segundos:number = 0;



  public coleccion: Array<any>  = [];
  public contador:any;


  constructor(){

  }

    start(){
      if (this.contador == undefined){


this.contador=setInterval(()=>{

            this.segundos += 1;
            if(this.segundos == 10){
              this.minuto += 1;
              this.segundos = 0;
            }
            if(this.minuto == 10){
              this.hora +=1;
              this.minuto = 0;
            }

            if(this.hora == 10){
              this.hora = 0;
              this.minuto = 0;
              this.segundos = 0;
            }
            console.log(this.hora);

          } , 100);
      }
    }

    lapso(){

        let obj:any ={};
        obj.hora = this.hora;
        obj.minuto = this.minuto;
        obj.segundos = this.segundos;

        this.coleccion.push(obj);
    }

    stop(){
          clearInterval(this.contador);
          this.hora = 0;
          this.minuto = 0;
          this.segundos = 0;
          this.contador =null;
    }

}

app.html

<h1> Hola mundito!! </h1>
  <h2>Cronometro</h2>
  <cronometro></cronometro>

OUTPUT

    ERROR in src/app/app.component.ts(8,3): error TS2345: Argument of type '{ selector: string; styleUrls: string[]; templateUrl: string; directives: (typeof cronometro)[]; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

i 「wdm」: Failed to compile.

1 respuesta 1

0

Ese error creo que es porque "directives" de @Components, "cronometro" no es una directiva, es un componente y debe ser importado dentro del mismo módulo donde lo vas a llamar en "imports", si fueran de diferentes módulos tendría que estar en "exports" e importar el módulo donde se encuentra "cronometro".

Para poder pasar los parámetros a un componente hijo puede pasarlo dentro de la etiqueta.

<cronometro [contador]="contador" ></cronometro>

En el componente tendrá que tener "@Input('contador') contador: any; o si quieres tener más parámetro poner un Input por cada uno para el binding del padre al hijo o poner la lógica del cronómetro en el componente hijo y sólo llamarlo con la etiqueta.

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.