Product-Details aus Tutorial übernommen

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4cd6aea..a20e2d0 100644 (file)
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,17 +5,20 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
 import { ProductListComponent } from './product-list/product-list.component';
+import { ProductDetailsComponent } from './product-details/product-details.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     TopBarComponent,
-    ProductListComponent
+    ProductListComponent,
+    ProductDetailsComponent
   ],
   imports: [
     BrowserModule,
     RouterModule.forRoot([
-      { path: '', component: ProductListComponent }
+      { path: '', component: ProductListComponent },
+      { path: 'products/:productId', component: ProductDetailsComponent }
     ])
   ],
   providers: [],

diff --git a/src/app/product-details/product-details.component.css b/src/app/product-details/product-details.component.css
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/app/product-details/product-details.component.html b/src/app/product-details/product-details.component.html
new file mode 100644 (file)
index 0000000..a86d6b8
--- /dev/null
+++ b/src/app/product-details/product-details.component.html
@@ -0,0 +1,7 @@
+<h2>Product Details</h2>
+
+<div *ngIf="product">
+  <h3>{{ product.name }}</h3>
+  <h4>{{ product.price | currency }}</h4>
+  <p>{{ product.description }}</p>
+</div>

diff --git a/src/app/product-details/product-details.component.spec.ts b/src/app/product-details/product-details.component.spec.ts
new file mode 100644 (file)
index 0000000..8de32d0
--- /dev/null
+++ b/src/app/product-details/product-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDetailsComponent } from './product-details.component';
+
+describe('ProductDetailsComponent', () => {
+  let component: ProductDetailsComponent;
+  let fixture: ComponentFixture<ProductDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/app/product-details/product-details.component.ts b/src/app/product-details/product-details.component.ts
new file mode 100644 (file)
index 0000000..049b7cc
--- /dev/null
+++ b/src/app/product-details/product-details.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { products } from '../products';
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  styleUrls: ['./product-details.component.css']
+})
+export class ProductDetailsComponent implements OnInit {
+  product;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      this.product = products[+params.get('productId')];
+    });
+  }
+
+}