web-dev-qa-db-fra.com

Comment puis-je transmettre des accessoires dans Angular 2+ comme React?

En réaction, je peux transmettre arbitrairement les accessoires comme ceci:

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

Comment puis-je faire la même chose dans Angular?

-

Plus précisément, je veux écrire un composant déroulant personnalisé et transmettre les accessoires à une zone de sélection.

javascriptangularreactjstypescript
5
Rico Kahler

Contrairement aux composants React, les composants Angular ne sont pas recompilés lors des modifications d'entrée et utilisent les décorateurs de propriété @Input pour activer la détection des modifications. Toutes les propriétés qui doivent être transmises doivent être explicitement définies en tant qu'entrées de composant.

Il n'y a pas de meilleure option que celle-ci pour le composant de sélection personnalisé. Il est possible de lire static attributs à partir de l'élément de composant courant et de les définir sur un élément de composant imbriqué, mais cela ne configurera pas les liaisons.

En ce qui concerne la recette React pour les accessoires profonds dans les composants emballés:

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

Ceci est généralement géré par Angular DI et une hiérarchie d'injecteurs. Un fournisseur peut être défini sur l'injecteur respectif afin de rendre les données et le comportement disponibles pour les composants imbriqués.

3
estus

En fait, ce n'est pas la réponse à votre question, mais peut-être que cela vous aidera. Vous pouvez ajouter une directive personnalisée avec tous les paramètres dont vous avez besoin.

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>

Pour plus de détails, vous pouvez lire ceci

0
Dmitry Grinko