web-dev-qa-db-ja.com

Angular 2+でReactのように小道具を渡すにはどうすればよいですか？

反応で私は次のように小道具を任意に渡すことができます：

function SomeComponent(props) {
  const {takeOutProp, ...restOfProps} = props;
  return <div {...restOfProps}/>;
}

Angularでどうすれば同じことができますか？

-

より具体的には、カスタムドロップダウンコンポーネントを作成し、小道具を選択ボックスに渡します。

javascriptangularreactjstypescript
13
Rico Kahler

Reactコンポーネントとは異なり、Angularコンポーネントは入力の変更時に再コンパイルされず、@Inputプロパティデコレータで変更検出を有効にします。渡されることが予想されるすべてのプロパティは、コンポーネント入力として明示的に定義する必要があります。

カスタム選択コンポーネントには、これより優れたオプションはありません。現在のコンポーネント要素から静的attributesを読み取り、ネストされたコンポーネント要素に設定することは可能ですが、これはバインディングを設定しません。

Reactラップされたコンポーネントのディーププロップのレシピ：

const Baz = props => <p>{props.baz}</p>;
const Bar = props => <Baz {...props} />;
const Foo = props => <Bar {...props} />;

これは通常、Angular DIとインジェクターの階層によって処理されます。ネストされたコンポーネントでデータと動作を利用できるようにするために、プロバイダーをそれぞれのインジェクターで定義できます。

7
Estus Flask

実際、それはあなたの質問に対する答えではありませんが、おそらくあなたを助けるでしょう。必要なすべてのパラメーターを含む1つのカスタムディレクティブを追加できます。

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[defaultConfig]'
})
export class DefaultDropdownConfigDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
       // your default config

    }
}

<my-dropdown defaultConfig></my-dropdown>

詳細については、 this を参照してください。

2
Dmitry Grinko