角度で必須の入力を取り扱う方法

角度指令とコンポーネントの必要な入力を扱う.

おい、この記事は、指令または構成要素の必須の入力を取り扱うためのヒントを提示します.
古典的なアプローチは、入力値が設定されていないときにNGoninitメソッドを実装し、エラーをスローすることができます.

public ngOnInit(): void {
  if (this.myInput === undefined) {
    throw new Error('input myInput is required for MyDirective');
  }
}

しかし、私はすべての私の必須のプロパティのためにこれを書く必要はありません.
私は最近、一度だけそれを行うには興味深い方法を発見!
あなたは、タイプスクリプトの概念を知っていますかdecorators ?

V 1クラスデコレータ
それが私のコードです.

@Directive(...)
@RequiredInputs('input1', 'input2')
export class MyDirective {
  @Input()
  public input1!: unknown;

  @Input()
  public input2!: unknown;

  @Input()
  public input3Optional ?: unknown;
}

これを行うことができるデコレータを実装する方法を以下に示します.
< div >
<高橋潤子>
<> P >
クラスをハイライト表示する

<span myDirective></span> // throw Error
<span myDirective input1="1"></span> // throw Error
<span myDirective input1="1" input2="toto"></span> // No Error

< div >
読者がコメントしているように、このようなコンポート/ディレクションのセレクターを使うこともできます
<> P >
クラスをハイライト表示する

@Directive({
  selector: '[myDirective][input1][input2]',
  ...
})

< div >
しかし、エラーメッセージは一貫していません.あなたがそれのようにそれをするならば、指令は角度によって認識されません、そして、それはすべてです.ここでは、デコレータを使用すると、ケースの明示的なメッセージが表示されます.それで、はい、それを扱う多くの方法があります、ちょうどあなたの好む方法を選んでくださいp >
< H 3 >

プロパティデコレータ
<高橋潤子>
< p >このコードは< p/p >です.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/GaetanRdn/de66053b7a08831966b9ec7a6ba4c6d3.js//>
< div >
あなたはこのようにそれを使用しなければなりません
<> P >
クラスをハイライト表示する

@Component(...)
class MyComponent {
  @Input()
  @Required()
  public myProperty: unknown;

  ...
}

< div >
<市川>p >
あなたはどうですか.このユースケースはどうやって扱うのですか?教えてください.p >
< H 3 >

もっと学ぶ
<高橋潤子>
<ウル>

A decorator to coerce Boolean properties

<李>>

Angular for everyone: All about it

< ull >