web-dev-qa-db-ja.com

Angular 2、あるコンポーネントの変数に別のコンポーネントからアクセスできません

これが重複した質問である場合は申し訳ありませんが、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
    }

}

この問題の解決にご協力ください。よろしくお願いいたします。

angularangular2-components
5
balajivaishnav

使用する @Input親から子にデータを渡す 。ここでは、usersが配列であると想定しています。そうでない場合は、それに応じてタイプを調整します。

したがって、親テンプレートでは：

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

子（コンポーネントB）から、コンストラクターにUserを挿入しないでください。使用する @Input代わりに：

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

    constructor() { }
}

usersが実際に後で設定された場合に未定義のエラーが発生しないように、親でusersをインスタンス化するだけで、値がセットする：

users: User[] = [];

これは、usersの値が後で設定されることをシミュレートするデモです。ボタンをクリックするだけで、値が子に表示され、値は親に設定されます。

プランカー

5
AJT82

製本が見えません。 <hero-detail [hero]="selectedHero"></hero-detail>のようなものが欠けている可能性があります

0
Alejandro

私はあなたの質問を理解したいと思います。これがあなたの質問に答えるなら、それを答えとしてマークすることを忘れないでください。

子コンポーネント（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>

より正確な答えを与えるために、あなたの例をプランカーに提供してください、この小さな情報であなたが何を達成しようとしているのか理解するのは難しいです

0
Imants Volkovs

コンポーネント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);
   }
}
_
0
Ghanshyam Singh