Question

我有一个组件，我想实现一个接口。但是，这似乎不起作用。当我将鼠标悬停在Visual Studio代码中的@Component上时，出现错误，表明它无法解析组件的所有参数。

以下是：

import { Component, Input, OnInit } from '@angular/core';

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

export class ReactionComponent implements OnInit, MvReaction {
  @Input() data: MvReaction;
  constructor(
    public id: number, 
    public name:string, 
    public image: string,
    public count: number,
    public selected: boolean) { }

  ngOnInit() { }

}

export interface MvReaction{
  id: number,
  name : string,
  image : string,
  count ?: number,
  selected ?: boolean
}

当我使用该组件时，我得到：

StaticInjectorError（AppModule）[ReactionComponent - ＆gt;数字]：\ n
  StaticInjectorError（Platform：core）[ReactionComponent - ＆gt;数字]：\ n
  NullInjectorError：没有Number的提供者！

Answer 1

不应在构造函数中设置属性。构造函数是为依赖项保留的。你应该这样做：

import { Component, Input, OnInit } from '@angular/core';

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

export class ReactionComponent implements OnInit, MvReaction {
  @Input() data: MvReaction;
  public id: number;
  public name:string;
  public image: string;
  public count: number;
  public selected: boolean;

  constructor() { }

  ngOnInit() { }

}

export interface MvReaction{
  id: number,
  name : string,
  image : string,
  count ?: number,
  selected ?: boolean
}

Answer 2

我认为界面属性应该用分号分隔，不应该在constructor中。

另外，您确定在appModule中列出了该组件吗？

角度接口 - 无法解析组件的所有参数

2 个答案: