如何在角度组件上方声明接口? [英] How to declare an interface above an angular component?

问题描述

我有一个组件，该组件的方法从表单接收值. 我想用一个界面描述表单数据.

I have a component with a method that receives values from a form. I would like to describe the form data with an interface.

但是，在运行时(ng服务)，编译器告诉我该接口未知. (Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.)

However, at runtime (ng serve), the compiler tells me that the interface is unknown. (Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.)

如何正确声明接口?如果可能的话，我将避免仅为此接口创建一个单独的文件，因为它属于该组件.

How can I declare the interfaces properly ? If possible, I would avoid to create a separate file only for this interface, as it belongs to the component.

文件:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
import { FriendshipModel } from '../models/friendship.model';

interface IDatePickerDateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
}

interface IFriendshipFormModel {
    name: string;
    meetingDate?: IDatePickerDateModel;
}

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

export class CreateFriendshipComponent {
    @Output() friendshipCreated = new EventEmitter<FriendshipModel>();
    friendshipFormModel: IFriendshipFormModel;

    constructor() {
        this.friendshipFormModel = {
            name: '',
            meetingDate: null
        };
    }

    createFriendship() {
        const friendshipCreation: FriendshipModel = this.frienshipFactory(this.friendshipFormModel);
        this.friendshipCreated.emit(friendshipCreation);
    }
}

谢谢！

推荐答案

在这种情况下，也只需导出接口

In this case, just export interfaces as well

export interface IDatePickerDateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
}

export interface IFriendshipFormModel {
    name: string;
    meetingDate?: IDatePickerDateModel;
}

这篇关于如何在角度组件上方声明接口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！