Question

很抱歉，如果这是一个重复的问题，我在整个网络上搜索过的解决方案无法找到任何内容，我发布了它，我试图从另一个组件中的一个组件访问变量

我尝试过什么

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

问题

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

从您的孩子（组件B），不要在构造函数中注入User。请改用@Input：

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

    constructor() { }
}

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

users: User[] = [];

这是一个演示，模拟users的值在稍后设置。只需单击该按钮，值就会显示在子级中，即父级中设置的值。

Plunker

Answer 2

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

Answer 3

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

如果你有一个包含子组件（B-child）的组件（A-parent），那么你可以使用输入/输出装饰器在它们之间进行通信。

子组件具有事件属性userSelected，当 emit（值？：T）：void 方法将被调用时，它将触发事件。父组件将在此处接收事件 - （userSelected）=“onUserSelect（$ event）其中 $ event 包含传递给emit方法的值。因此它可以在父组件中使用< / p>

此处有更详细的说明：http://learnangular2.com/outputs/

父：

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

子：

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

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

更新 - 输入版本

根据组件A模板，组件B是组件A的子组件

此外，我进入你的实现，我感觉整个逻辑很奇怪。据我所知，组件A中有一个用户表，然后当选择一行时，会弹出模式窗口（组件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
}

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

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

为了给出更准确的答案，请向你提供你的例子，这些小信息很难理解你将要实现的目标

Answer 4

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

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

4 个答案:

Plunker