使用@HostBindings代替主角4

Question

我只是尝试用角度4制作动画,我看到了在组件中使用主机的教程

import { Component, OnInit, HostBinding } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
 import { moveIn } from '../router.animations';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
animations: [moveIn()],
host: {'[@moveIn]': ''}
})

但它显示我在主机属性"[tslint]使用@hostBindings和@HostListeners而不是主机属性"下的错误

Answer 1

tslint不是错误.它们是tslint webpack服务创建的TypeScript linting消息.

您可以在此处阅读有关TSLint的更多信息:

https://palantir.github.io/tslint/

出于某种原因,有人认为host在组件中使用该属性是一种不好的做法.您完全可以使用该功能以及其他组件配置功能.

要禁用此lint检查,请编辑tslint.json文件并添加/修改以下内容:

    "use-host-property-decorator": false

将其设置为false禁用检查.

Answer 2

@Reactgular后respose：

要禁用此 lint 检查，请编辑您的 tslint.json 文件并添加/修改以下内容：

"use-host-property-decorator": false

此属性重命名为：no-host-metadata-property，因此 tslint.json 中的代码为：

"no-host-metadata-property": false

Answer 3

对于那些将来遇到此问题的人，我想阐明一下为什么它是掉毛错误，以及为什么或为什么不应该使用该host财产。

因此，有两种方法可以设置属性并侦听主机组件上的事件。host组件装饰器中的属性，或者带有@HostBinding（对于属性）和@HostListener（对于事件）的属性。

当我们使用host属性，我们可以使用语法这正是像它在模板中，[]并()直接属性，如class。这很棒，因为您不必导入任何东西，当您查看它时，您几乎会知道会发生什么。现在，当您进入一些更复杂的场景时，例如设置aria属性，这些属性中的逻辑就会变得复杂。例如：

@Component({
   selector: 'my-component',
   host: {
     '[attr.aria-expanded]': 'expanded'
   }
})
export class MyComponent {
   expanded: boolean = false
}

在这里我们可以看到，expanded属性用于设置aria-expanded主机上的属性。使用任何工具，无论是IDE，TypeScript，LanguageExtensions，我们都无法看到两者之间的联系。

当您进行重构时，这会导致问题，并且您错过了这些字符串中的逻辑。当这种情况发生时，这确实是一个痛苦。

因此，要解决这个问题，您可以使用@HostBinding装饰器。

@Component({
   selector: 'my-component',
   host: {
     '[attr.aria-expanded]': 'expanded'
   }
})
export class MyComponent {
   expanded: boolean = false
}

现在，您可以将属性的名称更改为您想要的名称，并且每个人都很高兴。

直到您获得可能影响多个主机元素属性的属性，或者实际上具有某种逻辑的属性为止。

主机绑定

@Component({
   selector: 'my-component'
})
export class MyComponent {
   @HostBinding('attr.aria-expanded')
   expanded: boolean = false
}

有些人不喜欢@HostBindings物业的倍数。可以将其更改为：

主办

@Component({
   selector: 'my-component'
})
export class MyComponent {
   @HostBinding('attr.aria-expanded')
   @HostBinding('class.expanded')
   expanded: boolean = false
}

实际上具有逻辑的属性：

主机绑定

@Component({
   selector: 'my-component',
   host: {
      '[attr.aria-expanded]': 'expanded',
      '[class.expanded]': 'expanded',
   }
})
export class MyComponent {
   expanded: boolean = false
}

vs 主机

@Component({
   selector: 'my-component'
})
export class MyComponent {
   @HostBinding('attr.aria-expanded')
   @HostBinding('class.expanded')
   get expanded(): boolean {
      // Don't actually do this, this is just an example for Hostbinding vs. host
      return this._expanded ? true : null
   }

   // create a setter here as well.

   private _expanded: boolean = false
}

因此，既然我们知道每种功能，我们就可以讨论为什么host默认情况下linter会标记属性。

使用host属性时，实际上并没有检查以查看您是否正确拼写了该属性。当使用AoT构建Angular（通常用于生产）时，您很可能会得到错误，然后进行修复。使用时@HostBinding，在编辑器中获得反馈会更快，而不是等待很长的构建进度（实际上取决于应用程序的大小）。

因此，由于（对于当今的编译器而言）几乎未知的字符串值，host默认情况下会标记使用属性。

也许将来在AoT可以用于开发时（我认为使用Ivy渲染器？），我们可能会遇到这些编译器错误。但是与此同时，我们还没有到那儿。