web-dev-qa-db-ja.com

代わりに@HostBindingsを使用してくださいangular 4

angular 4でアニメーションを作成しようとすると、コンポーネントでHostを使用するチュートリアルを見ました

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]': ''}
})

しかし、Hostプロパティの下にエラーが表示されます「[tslint] Hostプロパティの代わりに@hostBindingsと@HostListenersを使用してください」

angularanimationangular2-hostbinding
8
Manspof

tslintはエラーではありません。これらは、tslintwebpackサービスによって作成されたTypeScriptリンティングメッセージです。

TSLintの詳細については、こちらをご覧ください。

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

何らかの理由で、コンポーネントでHostプロパティを使用することは悪い習慣であると誰かが判断しました。その機能やその他のコンポーネント構成機能を使用しても問題ありません。

このlintチェックを無効にするには、tslint.jsonファイルを編集し、以下を追加/変更します。

    "use-Host-property-decorator": false

falseに設定すると、チェックが無効になります。

16
Reactgular

将来これに遭遇する人のために、なぜそれがリンティングエラーであるのか、そしてなぜまたはなぜあなたがHostプロパティを使うべきなのかを明らかにしたいと思います。

したがって、プロパティを設定し、ホストコンポーネントでイベントをリッスンする方法はいくつかあります。コンポーネントデコレータのHostプロパティ、または@HostBinding（プロパティの場合）および@HostListener（イベントの場合）。

Hostプロパティを使用する場合、テンプレートの[]と()とまったく同じ構文と、classのような直接プロパティを使用できます。何もインポートする必要がなく、それを見ると何が起こるかがほぼわかるので、これは素晴らしいことです。ここで、ariaプロパティの設定など、より複雑なシナリオに入ると、これらのプロパティのロジックが複雑になります。例えば：

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

ここでは、展開されたプロパティを使用して、ホストにaria-expanded属性を設定していることがわかります。 IDE、TypeScript、LanguageExtensionsのいずれのツールを使用しても、2つがリンクされていることを確認することはできません。

これは、リファクタリングを行うときに問題を引き起こし、それらの文字列にあるロジックを見逃しました。そしてそれが起こるとき、それは本当の痛みです。

したがって、それを回避するには、@HostBindingデコレータを使用します。

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

これで、プロパティの名前を好きなように変更でき、誰もが満足しています。

それは、複数のHost要素の属性に影響を与える可能性のあるプロパティ、または実際に何らかのロジックを持っているプロパティに到達するまでです。

HostBinding

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

プロパティの複数の@HostBindingsが気に入らない人もいます。そして、それは次のように変更できます。

ホスト

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

そして実際にロジックを持っているプロパティ：

HostBinding

@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
}

vs ホスト

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

これで、それぞれが何をするのかがわかったので、Hostプロパティがデフォルトでリンターによってフラグ付けされる理由について説明できます。

Hostプロパティを使用する場合、プロパティのスペルが正しいかどうかを実際に確認するためのチェックは実際にはありません。 Angular AoT（通常は本番用）を使用してビルドすると、エラーが発生する可能性が高く、修正されます。@HostBindingを使用すると、エディターでフィードバックを取得する方が簡単です。長いビルドの進行を待つよりも（実際には、アプリケーションの大きさによって異なります）。

したがって、（今日のコンパイラでは）ほとんど不明な文字列値のため、Hostプロパティの使用にはデフォルトでフラグが付けられます。

将来、AoTを開発で使用できるようになると（Ivyレンダラーで考えますか？）、これらのコンパイラエラーが発生する可能性があります。しかし、その間、私たちはまだそこにいません。

10
Jonathan Cammisuli

@Reactgular post respose：

このlintチェックを無効にするには、tslint.jsonファイルを編集し、以下を追加/変更します。

"use-Host-property-decorator": false

このプロパティの名前は次のように変更されます：no-Host-metadata-propertyしたがって、tslint.jsonのコードは次のようになります。

"no-Host-metadata-property": false
2
user1983909