介绍
角框架用于开发单页应用程序。它的观点是组件的组合，包括最小的组件，例如，按钮最多可达整个页面。内容投影是一种使我们能够将一个组件投射到另一个组件的技术。本文介绍了我们如何将视图的一部分投影到其他方面。
ng-content
ng-content是嵌套组件的最多使用的角特征。最简单的例子是：
<app-parent>
<p>I will be nested!</p>
</app-parent>
和AppParent的模板：
<div class="wrapper">
<ng-content></ng-content>
</div>
，最终结果将是：
<app-parent>
<div class="wrapper"><p>I will be nested!</p></div>
</app-parent>
我们可以在组件中具有以上的ng-content元素，我们可以通过将select属性与查询选择器添加为值来区分它们的用法。
示例用法：
<div class="wrapper"><ng-content></ng-content></div>
<div class="wrapper-2">
<ng-content select=".for-second-wrapper"></ng-content></div>
然后我们可以使用它：
<app-parent>
<div class="wrapper"><p>I will be nested!</p></div>
<div class=".for-second-wrapper">
<p>I will be as next!</p>
</div>
</app-parent>
，结果将是：
<app-parent>
<div class="wrapper"><p>I will be nested!</p></div>
<div class="wrapper-2">
<div class=".for-second-wrapper">
<p>I will be as next!</p>
</div>
</div>
</app-parent>
Ngif，Ngfor，Ngswitch
有时我们希望有条件地显示一个或另一个内容。为此，我们可以使用ngIf指令。作为一个值，它希望布尔值设置为真实显示内容，并在值为false时将其从DOM中删除。用法的一个示例可能是：
<p *ngIf="isLoggedIn">I am logged in!</p>
和值：
isLoggedIn = true;
在Angular中，可以使用特殊的HTML元素来保持内容并在其他地方显示。该元素是ng-template。它可以与ngIf的组合一起使用，以显示值为false时。根据上述示例：
<p *ngIf="isLoggedIn; else notLoggedIn">I am logged in!</p>
<ng-template #notLoggedIn>
<p>I am NOT logged in!</p>
</ng-template>
#name_of_element像#notLoggedIn是一个模板参考，可用于选择混凝土html元素。
我们可以使用ngFor指令显示元素列表。示例：
<ul>
<li *ngFor="let user of users">{{user}}</li>
</ul>
和TS：
users = ['John', 'Tom', 'Merry'];
它通过提供的列表进行迭代，并将每个项目都放在变量下。上面的结果将是：
<ul>
<li>John</li>
<li>Tom</li>
<li>Merry</li>
</ul>
要访问每个元素的索引，我们可以使用index变量：
<ul>
<li *ngFor="let user of users; let i = index">
{{user}}
</li>
</ul>
也有名为odd和even的布尔变量，可以在列表中的以下项目之间有所不同。
我们可以将变量与各个名称first和last一起检查给定项目是第一个还是最后一个。
以上所有的结合可能是：
<ul>
<li *ngFor="let user of users; let i = index; let first = first; let last = last; let odd = odd; let even = even">
{{user}}
<p *ngIf="first">I am first</p>
<p *ngIf="last">I am last</p>
<p *ngIf="odd">I am odd</p>
<p *ngIf="even">I am even</p>
</li>
</ul>
类似于JavaScript，我们可以使用switch。在HTML中，它是ngSwitch和ngSwitchCase的组合，例如：
<div [ngSwitch]="userType">
<div *ngSwitchCase="'ADMIN'">
I am ADMIN
</div>
<div *ngSwitchCase="'MODERATOR'">
I am MODERATOR
</div>
<div *ngSwitchCase="'STANDARD'">
I am STANDARD
</div>
<div *ngSwitchDefault>
I am NOT KNOWN OR DEFAULT
</div>
</div>
和TS：
userType: 'ADMIN' | 'MODERATOR' | 'STANDARD' = 'STANDARD';
概括
Angular具有强大的内容投影机制，使我们能够结合渲染的内容组合。您可以访问官方documentation以获取详细信息。