Angulaire 2 - Obtenir de l'instance de composant

J'ai deux composants tels que:

@Component({
    selector: 'comp1',
    template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
    custom_text:string;
    constructor(text:string) {
        this.custom_text = text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1></comp1>
    `
})
export class Comp2 {
    constructor() {
        //...
        //How to send my own text to comp1 from comp2
        //...
    }
}

Est-il possible d'envoyer mon propre texte à partir de comp1 à comp2?

Est-il possible d'obtenir le comp1 instance de comp2?

Grâce.

Check this out blog.mgechev.com/2016/01/23/...

OriginalL'auteur Jon... | 2016-02-23

  1. 1

    Oui, c'est très facile à réaliser,

    La caisse de l'Tutoriel : PLUSIEURS COMPOSANTS
    La partie 3 de la Angular2 Tutoriels pour voir comment envoyer des entrées.

    @Component({
    selector: 'comp1',
    template: `<h1>{{customText}}</h2>`,
    inputs: ['customText']
})
export class Comp1 {
    public customText:string;
    constructor(text:string) {
        this.customText= text;
    }

 //ngOnChange to make sure the component is in sync with inputs changes in parent
 ngOnChanges() {
       this.customText= text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1 customText = "My Custom Test"></comp1>
    `
})
export class Comp2 {
    constructor() {
    }
}

    L'essayer et laissez-moi savoir comment ça s'est passé.

    Parfait , merci beaucoup...
    N'est-ce pas jeter une erreur?: constructor(text:string) {
    Yep. Mais était juste un exemple.
    merci, oui, l'original de votre exemple a la question. J'en étais à me demander/demande pourquoi Chibi ne montrent pas une solution de travail. (Pour que les futurs lecteurs de ne pas essayer de couper et de coller la solution, seulement pour découvrir qu'il ne fonctionne pas.)

    OriginalL'auteur Chibi Chakaravarthi

  2. 5

    comp2 est le parent de comp1, donc

    • pour envoyer des données à partir d'enfant à parent (comp1 à comp2) ajouter une OutputProperty de l'enfant:
      @Output() someEvent = newEventEmitter();
      et emit() un événement sur: this.someEvent.emit('some text');
      Les parents ont besoin de se lier à la sortie de la propriété/l'événement: <comp2 (someEvent)="someHandler()"></comp2>
    • pour obtenir une référence à une instance d'un composant enfant (comp2 obtient une référence à comp1), l'utilisation @ViewChild ou @Query dans comp2: @ViewChild(Comp1) viewChild:comp1; Vous pouvez ensuite accéder à this.comp1 dans ngAfterViewInit(), ou plus tard dans la composante du cycle de vie.
    J'ai commencé à penser que c'était une Sortie d'affaire, mais si vous regardez son code qu'il essaie de faire une entrée affaire et l'a exprimé à tort. J'aime votre réponse sur les émetteurs, mais normalement, je vois que les Sorties de rendre le composant dur à changer car nous avons besoin de maintenir l'appel de retour contrats, j'ai l'habitude de changer un changement dans le backend d'enregistrer et de propager le changement, mais pour un minimum de données sur l'état d'un rappel est fine.

    OriginalL'auteur Mark Rajcok