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

Question

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

我试过的

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

问题

组件 A 首先在浏览器中加载，其中包含 table 单击 table 行我将行数据作为对象并将该对象设置为包含类似内容的模型结构对象，我可以在组件中获取对象值，而我试图从组件 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

我看不到绑定。可能是你错过了类似的东西 <hero-detail [hero]="selectedHero"></hero-detail>

Answer 2

希望我理解你的问题。如果这回答了您的问题，请记住将其标记为答案。

如果您有一个组件 (A - parent) 具有 child 个组件 (B - child)，那么您可以使用 Input/Output 装饰器在它们之间进行通信他们。

Child 组件有事件属性 userSelected，它会在 emit(value?: T): void 方法被调用时触发事件。 Parent 组件将在此处接收事件 - (userSelected)="onUserSelect($event) 其中 $event 包含传递给 emit 方法的值.所以可以用在parent组件

More detailed description here: 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;
    }
}

Child:

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

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

更新 - 输入版本

According to Component A template, component B is child of component A

进一步我进入你的实现，我觉得整个逻辑很奇怪。据我所知，您在组件 A 中有 table 个用户，然后当一行被 select 编辑时，模态 window 会弹出（组件 B），您可以在其中操作用户详细信息。所以组件 A 的模板应该如下所示（简化版）：

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

然后为 B 组件定义与 A 模板中使用的名称相同的输入变量

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

好吧，您似乎错过了 select 用户的代码逻辑。我想你应该有类似的东西，这只是一个例子。您应该将整个 object 传递给组件 B.

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

为了给出更准确的答案，请向 plunker 提供您的示例，这些信息很少，很难理解您要实现的目标

Answer 3

组件 A

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);
    }
}

组件 B Html

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

组件B.ts

// skipping some code
export class BComponent{
     PrintUserInfo(user :User): void {
       console.log("Name :" + user.Name);
   }
}

Answer 4

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

因此在您的 parent 模板中：

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

从您的 child（组件 B）中，不要在构造函数中注入 User。使用 @Input 代替：

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

    constructor() { }
}

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

users: User[] = [];

这是一个演示，它模拟了稍后设置 users 的值。只需单击按钮，值将出现在 child 中，这些值在 parent.

中设置

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

Angular 2, Cant able to access a variable in one Component from another Component

angular2-components

angular

Plunker