diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8615ca0..891a4fc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,4 @@
-<app-child></app-child>
+<app-parent>
+
+  <app-child></app-child>
+</app-parent>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index aecceeb..357d769 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -9,6 +9,5 @@ import { Observable } from 'rxjs';
   providers:[{provide:'Message', useValue:'定義在根元件的訊息'}],
 })
 export class AppComponent {
-  constructor(@Inject('Message') public message: string) {}
 
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5e467dc..6a30fea 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,10 +5,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { ChildComponent } from './child/child.component';
+import { ParentComponent } from './parent/parent.component';
 
 @NgModule({
   imports: [BrowserModule, HttpClientModule],
-  declarations: [AppComponent, ChildComponent],
+  declarations: [AppComponent, ChildComponent, ParentComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/child/child.component.ts b/src/app/child/child.component.ts
index 2344bf6..d03c57e 100644
--- a/src/app/child/child.component.ts
+++ b/src/app/child/child.component.ts
@@ -1,13 +1,10 @@
-import { Component, Inject, Self, SkipSelf } from '@angular/core';
+import { Component, Host, Inject, Self, SkipSelf } from '@angular/core';
 
 @Component({
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
-  // 未設定時會拋出錯誤
-  //providers: [{ provide: 'Message', useValue: '定義在子元件的訊息' }],
 })
 export class ChildComponent {
-  // 指定 @Self 只會找尋自己的提供者實體
-  constructor(@Self() @Inject('Message') public message: string) {}
+  constructor(@Host() @Inject('Message') public message: string) {}
 }
diff --git a/src/app/parent/parent.component.css b/src/app/parent/parent.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/parent/parent.component.html b/src/app/parent/parent.component.html
new file mode 100644
index 0000000..60e0ce6
--- /dev/null
+++ b/src/app/parent/parent.component.html
@@ -0,0 +1,2 @@
+<h3>Parent Component</h3>
+<ng-content></ng-content>
diff --git a/src/app/parent/parent.component.ts b/src/app/parent/parent.component.ts
new file mode 100644
index 0000000..e97ad83
--- /dev/null
+++ b/src/app/parent/parent.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-parent',
+  templateUrl: './parent.component.html',
+  styleUrls: ['./parent.component.css'],
+  providers:[{provide:'Message', useValue:'定義在父元件上的訊息'}],
+})
+export class ParentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}