TS2693 'string' 仅指一种类型，但在此处用作值答案

【问题标题】：TS2693 'string' only refers to a type, but is being used as a value hereTS2693 'string' 仅指一种类型，但在此处用作值
【发布时间】：2020-02-26 20:04:12
【问题描述】：

我有以下子组件

@EntryComponent({
  type: PhoneNumberComponent,
  name: 'PhoneNumberComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[phone-number-cmp]',
  templateUrl: '../views/phone-number.html'
})
export class PhoneNumberComponent {
  @Input() parentForm: FormGroup;
  @Input() control: AbstractControl;
  @Input() label: string;
  @Input() className: string;
  @Input() errorMessageRequired: string;
  @Input() errorMessagePattern: string;
}

在某处抛出 TSlint 错误 TS2693 'string' only refers to a type, but is being used as a value here

我尝试将@Input 变量/值重新分配给局部变量，但没有成功消除该错误。

  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="'Office Phone Number'"
       [className]="'officePhoneNumber'"
       [errorMessageRequired]="'Office phone number is required.'"
       [errorMessagePattern]="'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="faxPhoneNumber"
       [label]="'Fax Phone Number'"
       [className]="'faxPhoneNumber'"
       [errorMessageRequired]="'Fax phone number is required.'"
       [errorMessagePattern]="'Fax phone number must contain 10 numbers. (e.g. XXX XXX XXXX)'"
  ></div>

我正在传递string 像上面这样的值。

有谁知道如何摆脱该消息？

【问题讨论】：

TS 错误通常也会给出行号。你应该看看那里
我有几个问题。 Module.id 为什么要使用它？我在 NGX 的早期版本中看到了这一点，但在更高版本中没有看到。还有@EntryComponent 装饰器，为什么在这里使用它？这是一个动态创建的组件吗？如果是这样，为什么不把它放到模块的入口组件中并使用装饰器呢？（我之所以这么问，是因为我以前没有见过这样做，我真的很想知道为什么以及将其放入模块中的优势可能是什么）
很确定你的选择器也不应该在 [ ]s 中
@PierreDuc，它现在给了我行号，这也是我第一个看的地方。
@IngeOlaisen 请看stackoverflow.com/questions/37178192/…，一般来说它有助于相对路径。

标签： angular angular6

【解决方案1】：

我的解决方案是从父级传递值

.html
  <div phone-number-cmp
       class="phone-number"
       [parentForm]="parentForm"
       [control]="officePhoneNumber"
       [label]="officePhoneNumberLabel"
       [className]="officePhoneNumberClassName"
       [errorMessageRequired]="OfficePhoneNumberRequired."
       [errorMessagePattern]="OfficePhoneNumberPattern"
  ></div>

.ts
@EntryComponent({
  type: ContactInfoComponent,
  name: 'ContactInfoComponent'
})
@Component({
  moduleId: module.id,
  providers: [],
  selector: '[contact-info-cmp]',
  templateUrl: '../views/contact-info.html'
})
export class ContactInfoComponent {
  @Input() parentForm: FormGroup;
  @Input() officePhoneNumber: AbstractControl;
  @Input() faxPhoneNumber: AbstractControl;
  @Input() emailAddress: AbstractControl;
  @Input() contactPerson: AbstractControl;
  OfficePhoneNumberLabel: string = 'Office Phone Number';
  OfficePhoneNumberClassName: string = 'officePhoneNumber';
  OfficePhoneNumberRequired: string = 'Office phone number is required.';
  OfficePhoneNumberPattern: string = 'Office phone number must contain 10 numbers. (e.g. XXX XXX XXXX)';
}

【讨论】：

我认为这是因为您必须为 @Input 标记变量分配初始值，但您可以使用 \@Input var !: type ...

【解决方案2】：

我认为这是因为您必须为 @Input 标记变量分配初始值，但您可以使用 @Input var !: typee

【讨论】：