web-dev-qa-db-fra.com

Passer la variable à un composant personnalisé

J'ai mon composant personnalisé:

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }
}

Je peux l'utiliser comme ça:

<my-custom-component></my-custom-component>

Mais comment je peux passer une variable? Par exemple:

<my-custom-component custom-title="My Title"></my-custom-component>

Et l'utiliser dans mon code de composant?

angulartypescriptangular2-templateangular2-components
28
rpayanm

Vous devez ajouter la propriété Input à votre composant, puis utiliser la liaison de propriété pour lui transmettre une valeur:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {

    @Input()
    customTitle: string;

    constructor() {
        console.log('myCustomComponent');
    }

    ngOnInit() {
        console.log(this.customTitle);
    }
}

Et dans votre modèle:

<my-custom-component [customTitle]="yourVariable"></my-custom-component>

Pour plus d'informations, consultez cette page .

54
Stefan Svrkota

Vous pouvez ajouter un décorateur @Input() à une propriété de votre composant.

export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }

    @Input() title: string;
}


<my-custom-component title="My Title"></my-custom-component>

ou titre contraignant d'une variable 'theTitle'

<my-custom-component [title]="theTitle"></my-custom-component>

Voir la @Input() decorator documentation.

8
Garth Mason