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

Question

很抱歉，如果这是一个重复的问题，我已经在整个 Web 上搜索了解决方案，但找不到任何解决方案，所以我发布了它，我正在尝试从另一个组件中的一个组件访问变量

我尝试过的

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

问题

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

型号

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
    }

}

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

Answer 1

当你想要pass data from parent to child时使用@Input .这里我假设 users 是一个数组。如果不是，请相应地调整类型。

所以在你的父模板中:

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

在您的 child (组件 B)中，不要在构造函数中注入(inject) User。使用 @Input 代替:

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

    constructor() { }
}

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

users: User[] = [];

这是一个演示，它模拟了稍后设置users 的值。只需单击该按钮，值就会出现在子项中，这些值是在父项中设置的。

Plunker