Angular 2，无法从另一个组件访问一个组件中的变量

抱歉，如果这是一个重复的问题，我已经在整个网络上搜索了解决方案，但无法找到任何解决方案，因此将其发布，我正在尝试从一个组件访问另一个组件中的变量

我尝试过的

我创建了一个对象类型的模型，并在组件 A 方法中设置了值，并尝试从组件 B 访问该模型对象，以便我可以设置组件 B 元素的值，但将对象设置为未定义

Problem

组件 A 首先在浏览器中加载，其中包含一个表，单击表行时我将行数据作为对象获取，并将该对象设置为包含类似结构对象的模型，我可以在组件中获取对象值，而我尝试从组件 B 调用模型，以便可以访问对象值。但我得到的对象值未定义，这是因为组件 B 是一个在组件 A 模板内调用的模态。

A组份

 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
    }

组件A模板

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

Model

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

}

组分B

export class Component B   { 

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

}

请帮我解决这个问题，提前致谢

Use @Input当你想要的时候将数据从父级传递给子级 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child。这里我假设users是一个数组。如果不是，请相应地调整类型。

所以在你的父模板中：

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

来自您的孩子（成分 B），请勿注射User在构造函数中。使用@Input反而：

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

    constructor() { }
}

这样您就不会收到未定义的错误，如果users实际上是稍后设置的，只需实例化即可users在你的父级中，这样它在等待设置值时就不会未定义：

users: User[] = [];

这是一个演示，它模拟了以下值users是在稍后的时间点设置的。只需单击按钮，值就会显示在子项中，这些值在父项中设置。

Plunker http://plnkr.co/edit/rnpqyxGgyjaOQtCgXe02?p=preview