コメントに関してご回答します。
DIするサービスの変数はそれぞれのコンポーネントで、共有できるという解釈でいいものでしょうか?
基本的にその解釈で正しいです。ドキュメントを見ると、「CLIで生成されたアプリケーションでは、モジュールは事前ロードされプロバイダー(service)は全モジュールで利用可能となる」と有ります。そして「Angularルーターがモジュールを遅延ロードすると、新しいインジェクターが作成されます」とあり、遅延ロードしたComponentでは別インスタンスとなり共有できないものと解釈できます。
https://angular.jp/guide/providers
angularではページ部品をcomponentとすることでcomponentを組み合わせてページを作成したり、他ページで再利用することが可能です。そしてcomponent間のデータ受け渡しやイベントの通知にserviceをDIしてsubscribeを使用する方法が有ります。また、DB連動のためにrestサービスを使用する場合なども、serviceとして実装していれば、メソッドを各componentで共通利用できます。単にデータ共有する場合ではsubscribeを利用する必要は有りませんが、自componentで発生したイベントを他componentに通知したい時にはsubscribeを利用することになります。
実際に画面遷移するコードを書いて試してみました。結果、Routerを使用した画面遷移を行えばserviceは共有でき、serviceに保持用のメンバを配置してget/setterを使えばページ間のデータ受け渡しが出来ました。また、subscribeではデータ送信時(next)に受信側のComponentのインスタンスが不在なのでデータは受け取れないようです。ご参考までに確認したコードを記載します。
app.module.ts
javascript
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppRoutingModule } from './app-routing.module';
5import { AppComponent } from './app.component';
6
7import { SendComponent } from './send/send.component';
8import { ReceiveComponent } from './receive/receive.component';
9import {TestService} from './test.service'
10
11@NgModule({
12 declarations: [
13 AppComponent,
14 SendComponent,
15 ReceiveComponent
16 ],
17 imports: [
18 BrowserModule,
19 AppRoutingModule
20 ],
21 providers: [TestService],
22 bootstrap: [AppComponent]
23})
24export class AppModule { }
25
app-routing.module.ts
javascript
1import { NgModule } from '@angular/core';
2import { Routes, RouterModule } from '@angular/router';
3
4import { SendComponent } from './send/send.component';
5import { ReceiveComponent } from './receive/receive.component';
6
7const routes: Routes = [
8 {path:'send',component:SendComponent},
9 {path:'receive',component:ReceiveComponent}
10];
11
12@NgModule({
13 imports: [RouterModule.forRoot(routes)],
14 exports: [RouterModule]
15})
16export class AppRoutingModule { }
app.component.ts
javascript
1import { Component,OnInit } from '@angular/core';
2import { Router } from '@angular/router';
3
4@Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.css']
8})
9export class AppComponent implements OnInit{
10 title = 'tera01';
11
12 constructor(private router:Router) { }
13
14 ngOnInit(){
15 this.router.navigate(['send']);
16 }
17
18}
19
app.component.html
html
1<router-outlet></router-outlet>
send.component.ts
javascript
1import { Component, OnInit } from '@angular/core';
2import { Router } from '@angular/router';
3
4import {TestService} from '../test.service'
5
6@Component({
7 selector: 'app-send',
8 templateUrl: './send.component.html',
9 styleUrls: ['./send.component.css']
10})
11export class SendComponent implements OnInit {
12
13 constructor(private service:TestService,private router:Router) { }
14
15 ngOnInit() {
16 }
17
18 onClick(){
19 this.service.setMessage("from SendComponent");
20 this.router.navigate(['receive']);
21 }
22
23
24}
25
receive.component.ts
javascript
1import { Component, OnInit } from '@angular/core';
2
3import {TestService} from '../test.service'
4
5@Component({
6 selector: 'app-receive',
7 templateUrl: './receive.component.html',
8 styleUrls: ['./receive.component.css']
9})
10export class ReceiveComponent implements OnInit {
11
12 msg:any;
13
14 constructor(private service:TestService) {
15 }
16
17 ngOnInit() {
18 this.msg = this.service.getMessage();
19 }
20
21}
22
test.service.ts
javascript
1import { Injectable } from '@angular/core';
2
3@Injectable({
4 providedIn: 'root'
5})
6
7export class TestService {
8
9 private message:string;
10
11 getMessage():string{
12 return this.message;
13 }
14
15 setMessage(msg:string){
16 this.message=msg;
17 }
18
19}
20
console.logの表示が正しいのであれば、subscribeのcallbackは出来ていると思えます。そうなるとComponent(class)とtemplate(html)のマッピングがどこかおかしいのではないでしょうか。
@Componentの情報は記載できますか?
aaaa以外に変数を定義し、templateと双方向バインドが出来ているか確認できますか?
<追記>
this.aaaa = event; を this.aaaa = "test";と変えてみてブラウザ表示されるのであればtemplateとのマッピングは解決している(領域は共有している)と思います。bbbbでも成功しているようですし。そうなると引数で渡ってくるeventの内容(もしくは型)に表示できない要素があるのではと推測します。
aaaa:anyと宣言してもNGだったでしょうか?
<追記>
すみません、初めから勘違いをしていたようです。画面遷移しているのですね(読み落としておりました)。SPAデザインと思いこんでいました。遷移先画面ではserviceをinjectしても別インスタンスになるものと思われます(試していないのですが恐らくそうでしょう)そうなると遷移前画面からのsubscribは読めないですね。前述の「領域は共有している」は撤回いたします。遷移先ページには他手段で値を渡す必要があると思います。
「angular 画面遷移 データ受け渡し」で検索されてはどうでしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/21 01:21
2018/11/21 01:35
2018/11/21 04:19
2018/11/21 09:01
2018/11/22 05:48