这篇文章主要介绍“angular中怎么进行内容投影”，在日常操作中，相信很多人在angular中怎么进行内容投影问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”angular中怎么进行内容投影”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了铜官免费建站欢迎大家使用！
一、 ng-content 进行内容投影
1.1 ng-content
ng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件，当 Angular 解析模板时，就会在子组件模板中 ng-content 出现的地方插入外部内容。
我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局，并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。
1.2 为什么使用内容投影
定义一个 button 组件：
button-component.ts
@Component({
selector: '[appButton]',
template: `
`
})
export class AppButtonComponent {}这个 button 组件的目的是在按钮内部加一个搜索的图标，我们实际使用如下：
click
我们发现组件只会展示搜索图标， 按钮的文本不会展示，能你会想到最常使用的 @Input 装饰器，但是如果我们不只是想传文本进来，而是传一段 html 进来呢？此时就会用到 ng-content。
1.3 单插槽内容投影
内容投影的最基本形式是单插槽内容投影。
单插槽内容投影是指创建一个组件，我们可以在其中投影一个组件。
以 button 组件为例，创建一个单槽内容投影：
button-component.ts
@Component({
selector: '[appButton]',
template: `
`
})
export class AppButtonComponent {}实际使用如下：
click
可以发现，现在这个 button 组件的效果是即显示了搜索图标，又显示了按钮的文本（click）。即把 投影 到了组件的
ng-content 元素是一个占位符，它不会创建真正的 DOM 元素。ng-content 的那些自定义属性将被忽略。
1.4 多插槽内容投影
一个组件可以具有多个插槽，每个插槽可以指定一个 CSS 选择器，该选择器会决定将哪些内容放入该插槽。该模式称为多插槽内容投影。使用此模式，我们必须指定希望投影内容出现在的位置。可以通过使用 ng-content 的 select 属性来完成此任务。
组件模板含有多个 ng-content 标签。
为了区分投影的内容可以投影到对应 ng-content 标签，需要使用 ng-content 标签上的 select 属性作为识别。
select 属性支持标签名、属性、CSS 类和 :not 伪类的任意组合。
不添加 select 属性的 ng-content 标签将作为默认插槽。所有未匹配的投影内容都会投影在该 ng-content 的位置。
以 button 组件为例，创建一个多槽内容投影：
button-component.ts
@Component({
selector: '[appButton]',
template: `
`
})
export class AppButtonComponent {}实际使用如下：
click
me here
1.5 ngProjectAs
在某些情况下，我们需要使用 ng-container 把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf 或者 ngSwitch 等。。
在下面的例子中，我们将 header 包裹在了 ng-container 中。
@Component({
selector: 'app-card',
template: `
