时间戳

首页 > 解决方案 > Angular 私有内部接口（又名 Typescript 嵌套类）

angular - Angular 私有内部接口（又名 Typescript 嵌套类）

问题描述

如何在 Angular 指令中使用嵌套接口？

在 Java 中，我发现静态嵌套类是组织代码的好方法。我想在 Typescript/Angular 中做同样的事情，但无法完成所有设置。

下面的代码接近工作。但是我在是否导出命名空间时遇到问题

如果我这样做，那么我不能在包含它的模块中声明该指令。我收到以下警告：

MyDirective 没有在任何 Angular 模块中声明。

如果我不这样做，那么MyDirective.DirectiveOptions由于以下错误，我在键入对象时遇到了麻烦：

TS2702：“MyDirective”仅指一种类型，但在此处用作命名空间。

我的指令

@Directive({
    selector: '[appMyDirective]'
})
export class MyDirective implements OnInit {
    defaultDirectiveOptions: MyDirective.DirectiveOptions = {
        callback: () => {console.log('default callback called')}
    };

    @Input('appMyDirective')
    directiveOptions: MyDirective.DirectiveOptions = {};

    ngOnInit(): void {
        this.directiveOptions = {...this.defaultDirectiveOptions, ...this.directiveOptions};
    }
}

// Seems like a dumb way to nest an interface, but whatever.
export namespace MyDirective {
    export interface DirectiveOptions {
        callback?: () => void;
    }
}

文件中的其他地方foo.component.ts：

options: MyDirective.DirectiveOptions = {
    callback: ()=>{
        console.log('Overridden callback called');
    }
}

标签： angulartypescript

解决方案

因此，您使用一个名称创建名称空间和类。请注意，Angular 会编译为 JavaScript。并且 JS 没有类和命名空间。所有的东西都会编译成函数。这就是为什么你会收到这样的信息。

推荐阅读