Pass variable de 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 ceci:

<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 composant?

L'aide d'une entrée dans votre composant: angulaire.io/docs/ts/latest/guide/...

OriginalL'auteur rpayanm | 2017-02-17

  1. 35

    Vous devez ajouter Input propriété à votre composant, puis utilisation de la propriété de liaison pour passer de la 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'infos, découvrez cette page.

    ce travail! Aucune idée pourquoi customTitle variable n'est pas définie dans constructor() ?
    C'est undefined parce que Input est Angulaire du décorateur et dit "vie" à travers Angulaire du cycle de vie, c'est pourquoi il est uniquement disponible en OnInit et après (constructor n'a rien à voir avec Angulaires, il est initialisé avant OnInit). Vous pouvez lire plus sur Angulaire du cycle de vie des crochets ici: angular.io/docs/ts/latest/guide/lifecycle-hooks.html
    mais comment pouvez accéder à la chaîne "myAnotherVariable" ? <ma-custom-composant [customTitle]="yourVariable">myAnotherVariable</mon-custom-component>
    pourquoi potentiellement customTitle pourrait être "undefined"? parce que je reçois ce

    OriginalL'auteur Stefan Svrkota

  2. 8

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

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

    @Input() title: string;
}


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

    ou de liaison de titre à partir d'une variable 'theTitle'

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

    Voir le @Input()décorateur de la documentation.

    BTW, votre @Input élément peut avoir besoin d'être déclarée public pour qu'il fonctionne correctement.

    OriginalL'auteur Garth Mason