Repository: angular
Issue: Unclear demonstration about viewProviders dealing with projected content
Labels: P3,area: docs

### Describe the problem that you experienced

I am confused about the usage of the `viewProviders` when deal with `ng-content` situation. With the [doc](https://angular.io/guide/hierarchical-dependency-injection#providers-vs-viewproviders) said:

> Since the dog 🐶 is declared inside the <#VIEW>, it isn't visible to the projected content. Instead, the projected content sees the whale 🐳.

I am curious about whether 🐳 is still visible for `InspectorComponent` when `AnimalService` is provided as `viewProvieders` in `AppComponent`?

And [here](https://stackblitz.com/edit/angular-rgv5yv?file=src%2Fapp%2Fcomponents%2Finspector.component.ts,src%2Fapp%2Fcomponents%2Fapp-child.component.ts,src%2Findex.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts) is my repo.

The result is `InspectorComponent` which has been projected get the 🐳 from `AppComponent`'s  `viewProvieders`. 

Is that reasonable? Cause i got nothing about this from the Doc.

I aslo reproduce the mental model from my [repo](https://stackblitz.com/edit/angular-rgv5yv?file=src%2Fapp%2Fcomponents%2Finspector.component.ts,src%2Fapp%2Fcomponents%2Fapp-child.component.ts,src%2Findex.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts). > Since 🐳 is declared inside the <#VIEW>, it should be invisible to the projected content?

```
<app-root>
  <#VIEW @Provide(AnimalService="🐳")>
    <app-child>
      <#VIEW @Provide(AnimalService="🐶")>
        <div class="container">
          <h3>Content projection</h3>
          <app-inspector @Inject animal=>"🐳">
            <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>
          </app-inspector>
        </div>
  
      </#VIEW>
      <app-inspector>
        <#VIEW>
          <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
        </#VIEW>
      </app-inspector>
    </app-child>
  </#VIEW>
</app-root>
``` 

After this, i read the [code](https://github.com/angular/angular/blob/74258f3652eff268c7599c0f71baf929ed5b244b/packages/core/src/render3/di.ts#L529), `canAccessViewProviders` is false when DI process in `ChildComponent` while true in `AppComponent`.

So, at least, the doc should say that `the dog 🐶 is only invisible to its own projected content` like this. 

It's really fuzzy to me to make a clear understanding.


### Enter the URL of the topic with the problem

https://angular.io/guide/hierarchical-dependency-injection#providers-vs-viewproviders

### Describe what you were looking for in the documentation

How `viewProviders` dealing with this projected content?

### Describe the actions that led you to experience the problem

- There is a lack of clear definition and demos about how `viewProviders` worked with `ng-content` in different circumstances

### Describe what you want to experience that would fix the problem

- Make a specific defination about how `viewProviders` dealing with projected content.
- Supply more examples to demonstrate them in kinds of circumstances.
- Make a specific answer about whether it is reasonable that the children projected content should access the parent `viewProviders`. 

### Add a screenshot if that helps illustrate the problem

_No response_

### If this problem caused an exception or error, please paste it here

```true
no
```


### If the problem is browser-specific, please specify the device, OS, browser, and version

_No response_

### Provide any additional information here in as much as detail as you can

_No response_