angular - 在Angular 2模板文字中检测变量的使用

Question

我正在使用Sublime Text 3和ESLint。

当我使用模板文字语法定义Angular 2模板时，由于某种原因，ESLint无法捕获方法和属性的用法。

例子:

@Component({
    ..., // omitted for brevity
    template: `
        <button class="btn btn-primary" (click)="toggleOpenAssessment()">
            {{ isOpen ? 'close' : 'open' }} assessment
        </button>
    `
})
export class MyComponentComponent {
    private isOpen: boolean = false;

    private toggleOpenAssessment() { return true; }
}

我从ESLint得到的错误:

未使用的方法:'toggleOpenAssessment'

未使用的属性:'isOpen'

有人知道我如何可以调整ESLint来检测模板文字中使用的方法和属性吗？

Answer 1

遗憾的是，我发现当前不存在该问题的解决方案。

与该行为相关的属性是TSLint的no-unused-variable。

在Angular 2模板文件(或模板文字)中检查引用是否属于TSLint范围，因为TSLint依赖TypeScript的Language Service API查找值的出现。

我终于用found a related GitHub issue了answer from Adi Dahiya。他说:

Having tslint look into Angular templates is complex. To do it right, we really need to use Angular's template expression parser to get 100% compatibility, then hook Angular as an extension in TypeScript language service. We are close to a first version of VSCode support for angular templates. I'd like to figure out the linting story soon after.

这给我们留下了一些丑陋的解决方法:

不在所有

上都使用private属性

关闭TSLint配置

中的no-unused-variable标志

我希望在不久的将来，他们能找到一种方法来实现这一非常棒的功能!

PS:另外，还有a proposal for no-unused-variable deprecation。