抱歉，如果这是一个重复的问题，我已经在整个网络上搜索了解决方案，找不到任何解决方案，所以我正在发布它，我试图从另一个组件中的一个组件访问变量
我尝试过什么
我创建了一个对象类型的模型，并在组件 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">×</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
}
}
请帮我解决这个问题，提前谢谢
如果要将数据从父级传递到子级，请使用@Input。在这里，我假设users是一个数组。如果没有，请相应地调整类型。
所以在你的父模板中：
<componenetB [users]="users"></componenetB>
从你的孩子(组件 B)，不要在构造函数中注入User。请改用@Input：
export class Component B {
@Input users: User[];
constructor() { }
}
这样，如果以后实际设置了users，您就不会收到未定义的错误，只需在父级中实例化users，这样它就不会未定义
users: User[] = [];
这是一个演示，它模拟了稍后设置users的值。只需单击该按钮，值将显示在子项中，这些值是在父项中设置的。
普伦克
我看不到绑定。可能是你错过了类似的东西<hero-detail [hero]="selectedHero"></hero-detail>
组件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 网页
<component-a (selectedUser)="PrintUserInfo($event)"></component-a>
组件 B.ts
// skipping some code
export class BComponent{
PrintUserInfo(user :User): void {
console.log("Name :" + user.Name);
}
}
我希望我能理解你的问题。如果这回答了您的问题，请记住将其标记为答案。
如果你有一个组件(A - 父组件)具有子组件(B - 子组件)，那么你可以使用输入/输出装饰器在它们之间进行通信。
子组件具有事件属性userSelected，它将在发出(值？：T)：void方法时触发事件。父组件将在此处接收事件 - (userSelected)="onUserSelect($event)，其中$event包含传递给发出方法的值。所以它可以在父组件中使用
更详细的描述在这里： 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>
为了给出更准确的答案，请提供您的示例，有了这个小信息很难理解您将实现什么