I get the following error 'directives' does not exist

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.
    
asked by josanangel 14.07.2018 в 20:15
source

1 answer

0

That error I think is because "directives" of @Components, "chronometer" is not a directive, it is a component and must be imported into the same module where you will call it in "imports", if they were from different modules It would have to be in "exports" and import the module where "chronometer" is located.

To be able to pass the parameters to a child component, you can pass it within the tag.

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

In the component you will have to have "@Input('contador') contador: any; or if you want to have more parameter put an Input for each one for the binding of the father to the child or put the logic of the stopwatch in the child component and only call it with the label.

    
answered by 16.07.2018 в 08:21