angular4 変数 更新

Question

ページング機能を実装（コンポーネントを分けて）したのですが、ページが変わった時のイベント一覧が現在うまく取得できずに困っています。

<app-page-nation [collectionSize]="totalRecordCount" [(page)]="page" [maxSize]="count" [rotate]="true" [boundaryLinks]="true"></app-page-nation>

イベント一覧を取得するために、pageが変更された際に、ページの番号は{{page}}で取得できるのですが、このpageの値が変更された際にイベントを実行させるにはどのようにすればよいのでしょうか。

ページング機能は、[(page)]="page"としているため、app-page-nation側で選択したページ番号が、メインページのpage変数に格納されるところまでは確認しました。

簡単な質問かもしれないですが、何卒ご教授よろしくお願いいたします。

Answer 1

親子関係について

まず、app-page-nationの「親」となるコンポーネントがあると思うのですが、hogehoge123さんのやりたいことはこの親のコンポーネントに対して、「子」であるapp-page-nationコンポーネントからデータを渡して、そのデータの値が変更されたことがトリガーとなって親のイベントを実行させたい、と言うことでよろしいでしょうか？

仮に上記の前提だとして

この場合は、基本的な方法としてはOutput, EventEmitterというコンポーネントを使用することになると思います。 子のコンポーネントからデータをoutput型で作成して、eventをemitする、という感覚です。

• child.component.ts

@Output() isVisible: EventEmitter<boolean> = new EventEmitter<boolean>(false);

onClick() {
    this.isVisible.emit(true);
  }

• parent.component.ts

catchVisibleStatus(isVisible: boolean) {
  if (isVisible) {
    // do something
  } else {
    // do something
  }
}

• parent.component.html

<app-child (isVisible)="catchVisibleStatus($event)"></app-child>

この例だと、childのページでクリックボタンが押されたと仮定し、そのボタンが押されたらonClick()メソッドが起動します、そのイベントがトリガーとなって、parentのhtmlでeventとしてemitされてきたisVisible(childで指定したOutput変数の名前)の値をバインドして、親のcatchVisibleStatus()メソッドが起動します。

多分、他にもいくつか方法はあると思います。これは単なる一例です。

• そもそも前提が間違って回答していたらすみません、、、

Answer 2

pageChangeにて解決しそうなのですが、valueがNaNになって、3回実行されてしまいます。