docs: edit copy and example in hierarchical injectors guide (#32501)

Fixes #32461

PR Close #32501

aio/content/examples/providers-viewproviders/src/app/app.component.ts

@@ -13,3 +13,19 @@ export class AppComponent  {
   constructor(public flower: FlowerService, public animal: AnimalService) {}
 }
 // #enddocregion inject-animal-service
+
+// When using @Host() together with @SkipSelf() in
+// child.component.ts for the AnimalService, add the
+// following viewProviders array to the @Component metadata:
+
+// viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
+
+// So, the entire @ChildComponent() decorator and its
+// metadata should be as follows:
+
+// @Component({
+//   selector: 'app-root',
+//   templateUrl: './app.component.html',
+//   styleUrls: [ './app.component.css' ],
+//   viewProviders: [{ provide: AnimalService, useValue: { emoji: '🦔' } }]
+// })