これが重複した質問である場合は申し訳ありませんが、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">×</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>
のようなものが欠けている可能性があります
私はあなたの質問を理解したいと思います。これがあなたの質問に答えるなら、それを答えとしてマークすることを忘れないでください。
子コンポーネント(B-子)を持つコンポーネント(A-親)がある場合は、入力/出力デコレータを使用してそれらの間で通信できます。
子コンポーネントにはイベントプロパティuserSelectedがあり、emit(value?:T):voidメソッドが呼び出されたときにイベントを発生させます。親コンポーネントはここでイベントを受け取ります-(userSelected)= "onUserSelect($ event)where$ 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);
}
}
UPDATE-入力バージョン
コンポーネント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>
より正確な答えを与えるために、あなたの例をプランカーに提供してください、この小さな情報であなたが何を達成しようとしているのか理解するのは難しいです
コンポーネント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);
}
}
_
コンポーネントBHTML
<component-a (selectedUser)="PrintUserInfo($event)"></component-a>
コンポーネントB.ts
_// skipping some code
export class BComponent{
PrintUserInfo(user :User): void {
console.log("Name :" + user.Name);
}
}
_