Question

我正在尝试在我的应用程序中构建一个简单的组件以进行倒计时。每当我服务时，我都会不断收到这个未捕获的错误。请一点帮助，我被踩了

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ContentComponent } from './content/content.component';
import { CountdownComponent } from './countdown/countdown.component';

@NgModule({
 declarations: [
    AppComponent,
    ContentComponent,
    CountdownComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-count></app-count>

countdown.component.ts

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

@Component({
selector: 'app-count',
templateUrl: './countdown.component.html',
styleUrls: ['./countdown.component.css']
})

export class CountdownComponent {
dayleft: 100;

constructor(days: any) {
    setTimeout(() => {
        days = this.dayleft;
        days--;
    }, 1000);
}
}

countdown.component.html

<p>{{ daysleft }}</p>

Answer 1

从构造函数参数中删除$('form.campaign_form').on('submit', function(){ $('form.campaign_form').valid(); console.log($('form.campaign_form').valid()); // returns TRUE not false even fields with validations are empty return false; // just to prevent normal form submission });，并将其通过days传递。 Angular无法在构造函数中注入@Input。我认为您也不需要days: any属性。

daysleft

并使用

export class CountdownComponent {

   @Input() days;

   constructor() {
      setTimeout(() => {
        this.days--;
      }, 1000);
   }

}

此处<app-count [days]="100"></app-count>将被传递到100中，并使用CountdownComponent初始化days属性。

Answer 2

错误原因：

当Angle找到标签<app-count></app-count>时，他将尝试通过将html标签与CountdownComponent装饰器中的selector属性进行匹配来初始化组件CountdownComponent。这意味着角度代码将尝试执行以下操作：

let countdownComponent: CountdownComponent = new CountdownComponent()

由于您将天定义为必填参数，因此角度用户不知道如何解析您定义的参数并导致错误。

第一个解决方案：

您可以通过使用@Input decorator并通过HTML传递将传递哪个值来告诉角度女巫是天的值。

<app-count [days]=100></app-count>

export class CountdownComponent {
    @Input()
    dayleft: number = 100;

    constructor(days: any) {
        setTimeout(() => {
            days = this.dayleft;
            days--;
        }, 1000);
    }
}

第二个解决方案： 您可以将参数设置为optional或default parameters.

constructor(days: any = 100) {
    setTimeout(() => {
        days = this.dayleft;
        days--;
    }, 1000);
}

//or

constructor(days?: any) {
    if(!days) days = 100;
    setTimeout(() => {
        days = this.dayleft;
        days--;
    }, 1000);
}

Answer 3

是的，将days添加为类构造函数的权利是正确的，但是在这里，您不是一个如何创建和初始化CountdownComponent即时角向您这样做的人，为什么您会出错< strong>无法解析CountdownComponent的所有参数：（？），当您将pramater添加到componenet承包商角度尝试通过Angular DI系统进行注入时，在这种情况下，您可以创建注入值并将其提供给类构造函数通过@Inject装饰器。

创建注入值

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, CountComponent ],
  bootstrap:    [ AppComponent ],
  providers:[{provide:'days',useValue:100}]
})
export class AppModule { }

组件

export class CountComponent implements OnInit {

  id: any; // to clear setInterval 
  constructor( @Inject('days') private days: number) { }

  ngOnInit() {
    this.id = setInterval(() => {
      --this.days
      if (this.days === 0) {
        clearInterval(this.id)
      }
    }, 1000)
  }

}

计数模板

{{days}}

应用程序组件

<app-count></app-count>

stackblitz demo

另一种解决方案是创建Input属性并像@Suren Srapyan所说的那样使用它

未捕获的错误：无法解析CountdownComponent的所有参数：（？）

3 个答案: