@Host裝飾器

將元件的父層元素作為尋找注入實體的結束位置
<app-parent>
	<app-child/>
</app-parent>

src/app/app.component.html

@@ -1 +1,4 @@
-<app-child></app-child>
+<app-parent>
+
+  <app-child></app-child>
+</app-parent>

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) {}
 
 }

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 {}

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) {}
 }

src/app/parent/parent.component.html

@@ -0,0 +1,2 @@
+<h3>Parent Component</h3>
+<ng-content></ng-content>

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 {
+  }
+
+}