質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3396閲覧

[Angular] addEventListenerを使ったビューの更新

senkei_river

総合スコア15

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/05/01 16:46

質問

以下ソースコードにて、
addEventListenerを使ったAngularのビュー更新をしようとしております。

しかし、表示を確認すると、xの値が初期値で設定した0から更新されません。
func2関数にてxの値を変更しているのに、表示上更新されていないことの理由をご教授いただきたいです。

typescript

1import { Component, OnInit } from '@angular/core'; 2 3@Component({ 4 selector: 'app-root', 5 template: '<p>{{x}}</p>', 6 styleUrls: ['./app.component.scss'] 7}) 8 9export class AppComponent implements OnInit{ 10 x:any = 0; 11 y:any = 0; 12 z:any = 0; 13 14 ngOnInit(){ 15 this.func2(); 16 } 17 18 func1():void{ 19 setInterval(() =>{ 20 this.func2(); 21 }, 1000); 22 } 23 24 func2():void{ 25 window.addEventListener('devicemotion', (event) => { 26 this.x = event.accelerationIncludingGravity.x; 27 this.y = event.accelerationIncludingGravity.y; 28 this.z = event.accelerationIncludingGravity.z; 29 }); 30 } 31} 32

試したこと

ngOnInit関数を以下のように変更すると、
値が更新されていました。
ただ、上記質問でも記載させていただきました通り、
上記のソースコードにて表示の更新がされないことについてご教授いただきたいです。

ngOnInit(){ this.func1(); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

未確認ですが。

window.addEventListenerでリスナーを追加するとAngularのDOM監視外になります。なので変更がわからずビュー更新処理もされません。

強制的に通知させるにはthis.changeDetectorRef.detectChanges();処理を追加してください。

ts

1import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; // import追加 2 3// ........ 4 5 constructor(public changeDetectorRef: ChangeDetectorRef) { } // コンストラクタ追加 6// ........ 7 8 window.addEventListener('devicemotion', (event) => { 9 this.x = event.accelerationIncludingGravity.x; 10 this.y = event.accelerationIncludingGravity.y; 11 this.z = event.accelerationIncludingGravity.z; 12 this.changeDetectorRef.detectChanges(); // 追記 13 });

http://blog.webcreativepark.net/2017/05/01-130352.html

監視追加?

未確認2ですが監視自体を追加できるかもしれません。

ts

1angular.element($window).bind('devicemotion', function () { 2 this.x = event.accelerationIncludingGravity.x; 3 this.y = event.accelerationIncludingGravity.y; 4 this.z = event.accelerationIncludingGravity.z; 5});

https://stackoverflow.com/questions/22991481/window-orientationchange-event-in-angular

投稿2019/05/03 10:25

mosapride

総合スコア1480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

senkei_river

2019/05/11 15:51

ご回答ありがとうございます。 画面更新されるようになりました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問