ทำให้ parent component (wizard-base) เปลี่ยนข้อมูลตาม child component + reload p…

…arent เมื่อคลิกปุ่ม close (x)

ทำให้ parent component (wizard-base) เปลี่ยนข้อมูลตาม child component + reload p…
…arent เมื่อคลิกปุ่ม close (x)
Arsisakarn Srilatanart
1 parent 4fc21097
Showing 15 changed files with 167 additions and 14 deletions Show diff stats
src/app/app-routing.module.ts
src/app/app.module.ts
src/app/dummy/dummy.component.css
src/app/dummy/dummy.component.html
src/app/dummy/dummy.component.spec.ts
src/app/dummy/dummy.component.ts
src/app/services/shared-service.service.spec.ts
src/app/services/shared-service.service.ts
src/app/wizard-base/modal-one/modal-one.component.html
src/app/wizard-base/modal-one/modal-one.component.ts
src/app/wizard-base/modal-two/modal-two.component.html
src/app/wizard-base/modal-two/modal-two.component.ts
src/app/wizard-base/wizard-base.component.html
src/app/wizard-base/wizard-base.component.ts
src/index.html
@@ -4,6 +4,7 @@ import { RouterModule, Routes } from &#39;@angular/router&#39;;
 import { WizardBaseComponent } from './wizard-base/wizard-base.component';
 import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
 import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
+import { DummyComponent } from './dummy/dummy.component';
 const routes: Routes = [
   {
@@ -14,6 +15,10 @@ const routes: Routes = [
       { path: '2', component: ModalTwoComponent },
     ]
   },
+  {
+    path: 'dummy',
+    component: DummyComponent
+  },
   { path: '', redirectTo: '/wizard', pathMatch: 'full' },
 ];
@@ -9,13 +9,16 @@ import { AppComponent } from &#39;./app.component&#39;;
 import { WizardBaseComponent } from './wizard-base/wizard-base.component';
 import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
 import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
+import { SharedServiceService } from './services/shared-service.service';
+import { DummyComponent } from './dummy/dummy.component';
 @NgModule({
   declarations: [
     AppComponent,
     WizardBaseComponent,
     ModalOneComponent,
-    ModalTwoComponent
+    ModalTwoComponent,
+    DummyComponent
   ],
   imports: [
     BrowserModule,
@@ -23,7 +26,7 @@ import { ModalTwoComponent } from &#39;./wizard-base/modal-two/modal-two.component&#39;;
     HttpModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [ SharedServiceService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
@@ -0,0 +1,3 @@
+<p>
+  dummy works!
+</p>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DummyComponent } from './dummy.component';
+
+describe('DummyComponent', () => {
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DummyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dummy',
+  templateUrl: './dummy.component.html',
+  styleUrls: ['./dummy.component.css']
+})
+export class DummyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('dummy loaded');
+  }
+
+}
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SharedServiceService } from './shared-service.service';
+
+describe('SharedServiceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SharedServiceService]
+    });
+  });
+
+  it('should ...', inject([SharedServiceService], (service: SharedServiceService) => {
+    expect(service).toBeTruthy();
+  }));
+});
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class SharedServiceService {
+
+  // title = new Subject<string>();
+  title = new BehaviorSubject<string>('default');
+  title$ = this.title.asObservable();
+
+  constructor() {
+  }
+
+  changedTitle(newTitle: string) {
+    this.title.next(newTitle);
+  }
+
+
+}
@@ -3,16 +3,17 @@
   <!-- Modal content -->
   <div class="modal-content">
     <div class="modal-header">
-      <span class="close">&times;</span>
-      <h2>Modal Header One</h2>
+      <span class="close" (click)="btnClose()">&times;</span>
+      <h2>Modal Header One: {{title}}</h2>
     </div>
     <div class="modal-body">
       <p>Some text in the Modal Body</p>
       <p>Some other text...</p>
+      <button (click)="btnChange()">Change</button>
     </div>
     <div class="modal-footer">
       <h3>Modal Footer</h3>
-      <button [routerLink]="['/wizard', 2]">Next</button>
+      <button (click)="btnNext()">Next</button>
     </div>
   </div>
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SharedServiceService } from '../../services/shared-service.service';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
 @Component({
   selector: 'app-modal-one',
   templateUrl: './modal-one.component.html',
   styleUrls: ['./modal-one.component.css']
 })
-export class ModalOneComponent implements OnInit {
+export class ModalOneComponent implements OnInit, OnDestroy {
-  constructor() { }
+  title: string;
+  subscription: Subscription;
+
+  constructor(private shared: SharedServiceService, private router: Router) {
+    this.subscription = shared.title$.subscribe(title => {
+      this.title = title;
+    });
+  }
   ngOnInit() {
+
+  }
+
+  btnChange() {
+    this.shared.changedTitle('modal-one');
   }
+  btnNext() {
+    this.router.navigate(['/wizard', 2]);
+  }
+
+  btnClose() {
+    this.router.navigate(['/wizard']);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }
@@ -3,16 +3,17 @@
   <!-- Modal content -->
   <div class="modal-content">
     <div class="modal-header">
-      <span class="close">&times;</span>
-      <h2>Modal Header Two</h2>
+      <span class="close" (click)="btnClose()">&times;</span>
+      <h2>Modal Header Two: {{title}}</h2>
     </div>
     <div class="modal-body">
       <p>Some text in the Modal Body</p>
       <p>Some other text...</p>
+      <button (click)="btnChange()">Change</button>
     </div>
     <div class="modal-footer">
       <h3>Modal Footer</h3>
-      <button [routerLink]="['/wizard', 1]">Prev</button>
+      <button (click)="btnPrev()">Prev</button>
     </div>
   </div>
 import { Component, OnInit } from '@angular/core';
+import { SharedServiceService } from '../../services/shared-service.service';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-modal-two',
@@ -7,9 +9,30 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
 })
 export class ModalTwoComponent implements OnInit {
-  constructor() { }
+  title: string;
+
+  constructor(private shared: SharedServiceService, private router: Router) {
+    shared.title$.subscribe(title => {
+      this.title = title;
+    });
+  }
   ngOnInit() {
+
+  }
+
+  btnChange() {
+    this.shared.changedTitle('modal-two');
+  }
+
+  btnPrev() {
+    this.router.navigate(['/wizard', 1]);
   }
+  btnClose() {
+    this.router.navigateByUrl('/dummy').then(() => {
+      this.router.navigateByUrl('/wizard');
+    });
+    // this.shared.changedTitle('wizard');
+  }
 }
+<h1>{{title}}</h1>
 <p>
   wizard-base works!
 </p>
+<button (click)="openModal()">Modal</button>
 <router-outlet></router-outlet>
 import { Component, OnInit } from '@angular/core';
+import { SharedServiceService } from '../services/shared-service.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
 @Component({
   selector: 'app-wizard-base',
@@ -6,10 +9,22 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
   styleUrls: ['./wizard-base.component.css']
 })
 export class WizardBaseComponent implements OnInit {
+  title: string;
-  constructor() { }
+  constructor(private shared: SharedServiceService, private router: Router, private route: ActivatedRoute) {
+    shared.title$.subscribe(title => {
+      this.title = title;
+    });
+    shared.changedTitle('wizard');
+  }
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      console.log('wizard loaded');
+    });
   }
+  openModal() {
+    this.router.navigate(['/wizard', 1]);
+  }
 }
@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <app-root>Loading...</app-root>
@@ -0,0 +1,25 @@		@@ -0,0 +1,25 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+
	3	+import { DummyComponent } from './dummy.component';
	4	+
	5	+describe('DummyComponent', () => {
	6	+ let component: DummyComponent;
	7	+ let fixture: ComponentFixture<DummyComponent>;
	8	+
	9	+ beforeEach(async(() => {
	10	+ TestBed.configureTestingModule({
	11	+ declarations: [ DummyComponent ]
	12	+ })
	13	+ .compileComponents();
	14	+ }));
	15	+
	16	+ beforeEach(() => {
	17	+ fixture = TestBed.createComponent(DummyComponent);
	18	+ component = fixture.componentInstance;
	19	+ fixture.detectChanges();
	20	+ });
	21	+
	22	+ it('should create', () => {
	23	+ expect(component).toBeTruthy();
	24	+ });
	25	+});
@@ -0,0 +1,16 @@		@@ -0,0 +1,16 @@
	1	+import { Component, OnInit } from '@angular/core';
	2	+
	3	+@Component({
	4	+ selector: 'app-dummy',
	5	+ templateUrl: './dummy.component.html',
	6	+ styleUrls: ['./dummy.component.css']
	7	+})
	8	+export class DummyComponent implements OnInit {
	9	+
	10	+ constructor() { }
	11	+
	12	+ ngOnInit() {
	13	+ console.log('dummy loaded');
	14	+ }
	15	+
	16	+}
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+import { TestBed, inject } from '@angular/core/testing';
	2	+
	3	+import { SharedServiceService } from './shared-service.service';
	4	+
	5	+describe('SharedServiceService', () => {
	6	+ beforeEach(() => {
	7	+ TestBed.configureTestingModule({
	8	+ providers: [SharedServiceService]
	9	+ });
	10	+ });
	11	+
	12	+ it('should ...', inject([SharedServiceService], (service: SharedServiceService) => {
	13	+ expect(service).toBeTruthy();
	14	+ }));
	15	+});
@@ -0,0 +1,19 @@		@@ -0,0 +1,19 @@
	1	+import { Injectable } from '@angular/core';
	2	+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
	3	+
	4	+@Injectable()
	5	+export class SharedServiceService {
	6	+
	7	+ // title = new Subject<string>();
	8	+ title = new BehaviorSubject<string>('default');
	9	+ title$ = this.title.asObservable();
	10	+
	11	+ constructor() {
	12	+ }
	13	+
	14	+ changedTitle(newTitle: string) {
	15	+ this.title.next(newTitle);
	16	+ }
	17	+
	18	+
	19	+}
1	-import { Component, OnInit } from '@angular/core';	1	+import { Component, OnDestroy, OnInit } from '@angular/core';
		2	+import { SharedServiceService } from '../../services/shared-service.service';
		3	+import { Router } from '@angular/router';
		4	+import { Subscription } from 'rxjs/Subscription';
2		5
3	@Component({	6	@Component({
4	selector: 'app-modal-one',	7	selector: 'app-modal-one',
5	templateUrl: './modal-one.component.html',	8	templateUrl: './modal-one.component.html',
6	styleUrls: ['./modal-one.component.css']	9	styleUrls: ['./modal-one.component.css']
7	})	10	})
8	-export class ModalOneComponent implements OnInit {	11	+export class ModalOneComponent implements OnInit, OnDestroy {
9		12
10	- constructor() { }	13	+ title: string;
		14	+ subscription: Subscription;
		15	+
		16	+ constructor(private shared: SharedServiceService, private router: Router) {
		17	+ this.subscription = shared.title$.subscribe(title => {
		18	+ this.title = title;
		19	+ });
		20	+ }
11		21
12	ngOnInit() {	22	ngOnInit() {
		23	+
		24	+ }
		25	+
		26	+ btnChange() {
		27	+ this.shared.changedTitle('modal-one');
13	}	28	}
14		29
		30	+ btnNext() {
		31	+ this.router.navigate(['/wizard', 2]);
		32	+ }
		33	+
		34	+ btnClose() {
		35	+ this.router.navigate(['/wizard']);
		36	+ }
		37	+
		38	+ ngOnDestroy() {
		39	+ this.subscription.unsubscribe();
		40	+ }
15	}	41	}
1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
		2	+import { SharedServiceService } from '../../services/shared-service.service';
		3	+import { Router } from '@angular/router';
2		4
3	@Component({	5	@Component({
4	selector: 'app-modal-two',	6	selector: 'app-modal-two',
	@@ -7,9 +9,30 @@ import { Component, OnInit } from '@angular/core';		@@ -7,9 +9,30 @@ import { Component, OnInit } from '@angular/core';
7	})	9	})
8	export class ModalTwoComponent implements OnInit {	10	export class ModalTwoComponent implements OnInit {
9		11
10	- constructor() { }	12	+ title: string;
		13	+
		14	+ constructor(private shared: SharedServiceService, private router: Router) {
		15	+ shared.title$.subscribe(title => {
		16	+ this.title = title;
		17	+ });
		18	+ }
11		19
12	ngOnInit() {	20	ngOnInit() {
		21	+
		22	+ }
		23	+
		24	+ btnChange() {
		25	+ this.shared.changedTitle('modal-two');
		26	+ }
		27	+
		28	+ btnPrev() {
		29	+ this.router.navigate(['/wizard', 1]);
13	}	30	}
14		31
		32	+ btnClose() {
		33	+ this.router.navigateByUrl('/dummy').then(() => {
		34	+ this.router.navigateByUrl('/wizard');
		35	+ });
		36	+ // this.shared.changedTitle('wizard');
		37	+ }
15	}	38	}
		1	+<h1>{{title}}</h1>
1	<p>	2	<p>
2	wizard-base works!	3	wizard-base works!
3	</p>	4	</p>
		5	+<button (click)="openModal()">Modal</button>
4	<router-outlet></router-outlet>	6	<router-outlet></router-outlet>
	@@ -7,7 +7,6 @@		@@ -7,7 +7,6 @@
7		7
8	<meta name="viewport" content="width=device-width, initial-scale=1">	8	<meta name="viewport" content="width=device-width, initial-scale=1">
9	<link rel="icon" type="image/x-icon" href="favicon.ico">	9	<link rel="icon" type="image/x-icon" href="favicon.ico">
10	- <link rel="stylesheet" href="styles.css">
11	</head>	10	</head>
12	<body>	11	<body>
13	<app-root>Loading...</app-root>	12	<app-root>Loading...</app-root>