Angulaire 2, ne peux pas en mesure d'accéder à une variable dans un Composant à partir d'un autre Composant

Désolé si c'est un doublon de question, j'ai cherché la solution à travers le Web ne pouvez pas en mesure de trouver toute sorte am poster, Suis en train d'essayer d'accéder à une variable d'un composant à l'intérieur d'un autre composant

Ce que j'ai Essayé

J'ai créé un modèle de type d'objet et ont établi la valeur à l'intérieur d'un composant d'Une méthode, et essayé d'accéder à ce modèle d'objet composant B, de sorte que je peux définir la valeur de l'élément B des Éléments, mais obtenir de l'objet comme indéfini

Problème

Un composant est chargé en premier, dans le navigateur, si elle contient une table sur le clic de la ligne du tableau reçois les données de ligne d'objet et définition de l'objet à un Modèle qui contient une structure similaire à l'objet et je peux en mesure d'obtenir la valeur de l'objet au Composant, alors que j'ai essayé d'appeler le modèle à partir d'un Composant B, de sorte que je peux accéder à la valeur de l'objet. mais je suis l'obtention de la valeur de l'objet comme undefined cela est dû à la Composante B est un Modal qui est Appelée à l'intérieur de la Composante d'Un Modèle.

Composant Un

 public rowSelected:boolean = true;
 constructor(public users : User ) {}
  getRowData(rowIndex: number, rowData: any): void { 
        this.rowSelected = $(rowIndex).hasClass('selected');
        console.log(rowData);
        this.users= rowData.FirstName;
        console.log(this.users); //can able to get the object value
    }

Composante D'Un Modèle

<div bsModal #editUserModal="bs-modal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-label="Close" type="button" (click)="editUserModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title"><b>Edit User</b></h5>
            </div>
            <div class="modal-body">
                <componenetB #edituserDiv></componenetB>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm  confirm-btn gap0" type="button" (click)="edituserDiv.EditUserSubmit()">Submit</button>
                <button type="button" class="btn btn-default btn-sm gap-left10 gap0" type="button" (click)="editUserModal.hide()">Close</button>
            </div>
        </div>
    </div>
</div>

Modèle

export class User {
    UserName: any
    Password: any
    FirstName: any
    MiddleName: any
    LastName: any
    Status: any
    Locked: any
    Active: any
    CreatedOn: any
    LastModified: any

}

Composant B

export class Component B   { 

    constructor(public userz : User) {     
console.log(this.userz) //Object Value is Undefined
    }

}

Merci de m'aider à résoudre ce problème, merci d'avance

  • angular.io/docs/ts/latest/tutorial/toh-pt3.html
  • pouvez vous s'il vous plaît de souligner quel est le problème ?..
  • en fait suis en train de données sur le clic de la ligne, donc, au départ, le composant B obtient valeur non définie à l'aide de @input()
  • Sans @Input() et @Sortie, vous ne pouvez pas transmettre les données entre les composants
  • suis d'Erreur de la console comme Impossible de lire la propriété 'émettent' undefined, aucune idée
InformationsquelleAutor balajivaishnav | 2017-04-11
  1. 5

    Utilisation @Input quand vous voulez transmettre des données de parent à enfant. Ici je suppose users est un tableau. Si pas, régler le type en conséquence.

    Dans votre template parent:

    <componenetB [users]="users"></componenetB>

    De votre enfant (composant B), ne pas injecter User dans le constructeur. Utilisation @Input à la place:

    export class Component B   { 
    @Input users: User[];

    constructor() { }
}

    De sorte que vous n'obtenez pas non défini erreur si la users est en fait défini plus tard, il vous suffit d'instancier la users dans votre parent, de sorte qu'il ne soit pas défini, alors qu'il attend pour des valeurs de:

    users: User[] = [];

    Voici une démo, qui simule les valeurs de users sont fixés à un point plus tard. Cliquez simplement sur le bouton et les valeurs apparaissent dans l'enfant, les valeurs qui sont définies dans le parent.

    Plunker

    • mais je suis de définir les données à l'intérieur d'une méthode à partir d'Un Composant
    • Eh bien, c'est ce qu'il fait. Regardez de plus près à plunker. Lorsque vous cliquez sur le bouton dans le parent, setUsers est tiré, qui définit les valeurs, et puis ils sont présentés dans l'enfant.
    • merci beaucoup l'ami, votre réponse m'a donné une bonne idée de compléter mon travail
    • Pas de problème, content d'avoir pu aider 🙂
    InformationsquelleAutor AJT_82
  2. 0

    Je ne vois pas la liaison. Peut-être êtes-vous manque quelque chose comme
    <hero-detail [hero]="selectedHero"></hero-detail>

    • J'ai essayé aussi, suis-réglage de la valeur tandis que sur le clic de la ligne du tableau donc mon composant B se fait pas défini de données, qui n'ont aucune idée sur ce
    InformationsquelleAutor Alejandro
  3. 0

    Composant Un

    import {Component,EventEmitter} from "@angular/core";
import {User} from "User.Model";

@Component({
   selector: 'component-A',
   outputs :["selectedUser"],
   templateUrl:''
})

export class AppComponent{
 selectedUser : new EventEmitter<User>;
 public rowSelected:boolean = true;
 constructor(public users : User ) {}
 getRowData(rowIndex: number, rowData: any): void { 
        this.rowSelected = $(rowIndex).hasClass('selected');
        console.log(rowData);
        this.users= rowData.FirstName;
        this.selectedUser.emit(this.users);
    }
}

    Composant B Html

    <component-a (selectedUser)="PrintUserInfo($event)"></component-a>

    Composant B. ts

    //skipping some code
export class BComponent{
     PrintUserInfo(user :User): void {
       console.log("Name :" + user.Name);
   }
}
    • pouvez-vous svp vérifier votre code je pense que c'est faux, j'ai besoin d'émettre des données de composant A composant B
    • J'Ai fait de même en Émettant des données de A à B"
    • Et il fonctionne très bien
    • suis d'Erreur de la console comme Impossible de lire la propriété 'émettent' undefined
    • selectedUser : new EventEmitter<User>; avez-vous écrit cette ligne à l'intérieur de votre classe ?
    • Je pense que vous utilisez une ancienne version de Angulaire 2 ?.. parce que la production est séparée décorateur et n'est pas utilisé dans le composant décorateur
    • non, vous pouvez également définir la sortie comme ça
    • Pourquoi ai-je besoin pour utiliser le Composant A à l'intérieur de mon Composant B ? je suis déjà en utilisant le composant B à l'intérieur d'Un composant

    InformationsquelleAutor Ghanshyam Singh
  4. 0

    J'espère que je comprends de votre question. Si cela répond à votre question, n'oubliez pas de marquer comme réponse.

    Si vous disposez d'un composant (Un parent) qui a pour enfant composant (B - enfant), alors vous pouvez utiliser l'Entrée/Sortie des décorateurs pour communiquer entre eux.

    Composant enfant a propriété d'événement userSelected, il aura le feu de l'événement lorsque émettre(valeur?: T): void méthode sera appelée. Composant Parent recevra événement ici - (userSelected)="onUserSelect($event) où $event contient la valeur passée à émettre de la méthode. De sorte qu'il peut être utilisé dans le composant parent

    Description plus détaillée ici: http://learnangular2.com/outputs/

    Parent:

    @Component({
   selector: 'component-a',
   template:'<component-b (userSelected)="onUserSelect($event)"></component-b>'
})
export class AComponent{
    selectedUser: User;
    onUserSelect(user: User){
       this.selectedUser = user;
    }
}

    Enfant:

    @Component({
   selector: 'component-b'
})
export class BComponent {
   @Output() userSelected: EventEmitter<User>;

   rowClicked(user: User): void {
       this.userSelected.emit(user);
   }
}

    Mise à JOUR - version d'Entrée

    Selon Composante d'Un modèle, d'un composant B est l'enfant de la composante A

    Plus je vais dans votre mise en œuvre, j'ai l'impression que toute la logique est bizarre.
    Ce que je comprends, vous avez une table d'utilisateurs dans le Volet A, ensuite, lorsqu'une ligne est sélectionnée fenêtre modale apparaît (composant B) lorsque vous manipulez les détails de l'utilisateur.
    Sorte de modèle pour le volet A doit ressembler à ceci (version simplifiée):

    <div class="modal-body">
   <componenetB [selectedUser]="selectedUser"></componenetB>
</div>

    Alors pour B de la composante définir la variable d'entrée avec le même nom que celui utilisé dans Un modèle

    @Component({
   selector: 'component-b'
})
export class BComponent {
   @Input() selectedUser: User;

   //Further your logic using selectedUser variable
   //If need to return modified selectedUser to A component, use Output
}

    Ainsi, il semble que vous manquez à la logique de code pour sélectionner l'utilisateur. Je suppose que vous devriez avoir quelque chose de similaire à ceci, c'est juste un exemple. Vous devez passer tout l'objet de composant B.

    <table>
   <tr*ngFor="let user of users">
      <td (onClick)="openBModal(user)">{{user.UserName}}</td>
   </tr>
</table>

    Pour donner plus de réponse précise, veuillez fournir plunker avec votre exemple, avec ce peu d'informations est difficile de comprendre ce que vous allez atteindre

    • En fait, j'ai besoin d'émettre de la composante d'Un droit?
    • la logique reste la même, juste de l'autre manière autour. C'est un exemple pour votre problème. Il suffit de passer composants et vous obtenez votre solution souhaitée.
    • Je comprends, mais si je passe la logique vice versa je ne peux pas en mesure d'obtenir le résultat souhaité, en fait sortie décorateur utilisé pour transmettre des données d'un enfant à un parent du composant, mais j'essaie de parent à enfant, je ne pense pas sortie va m'aider au lieu de cela j'ai besoin d'opter pour l'entrée décorateur
    • Ok, je vais mettre à jour ma réponse
    InformationsquelleAutor Imants Volkovs