ng-content vs ng-template

• 相同点
  • 在组件之间传递模板
• 不同点
  • Content 只能传递一层，不可以跨多层级组件传递。
  • Content 可以理解为是实例，ngTemplate 可以理解为是类，也就是说 Content 只能是一个，template 可以传递给 ngFor,变多个。
  • Content 我们更加可以理解为是 children,子 dom, template 完全没有这个限制，它就是某个模板，放到一个变量里面。

content 简介

抛出一个疑问，为什么，第一段话能看见，第二段话看不见。

  Hello I am Content



   Hello I am Content, But I am missing in DOM

定义：内容投影 (Content Projection)，值将某个内容投影到其他的组件里面。

两个关键元素： 1. 投影的内容， 2. 投影的位置

• 投影的内容 (Content)值的是I am Content
• 投影的位置 (Content Slot) 值的是 , 也就是说I am Content 会被投影到的位置。

内容投影的类别与使用场景

• 单槽位投影 (Single-slot content projection)

// 使用
I am Content

// SomeComponent 定义, I am Content 会被投影到下面

• 多槽位投影 (Multi-slot content projection) 也就说，组件内部可以同时接受多个 content 的投影，利用ng-content的select参数来进行区别不同的内容。select 官方值的是css selector, 也就是说这个值是就是用的 css selector 的语法来定位元素的。

// SomeComponent 的使用

I am Content1
I am Content2
I am Content3



// SomeComponent 定义
...// befre dom



...// after dom

// 最终的效果是
...// befre dom
I am Content1
I am Content2
I am Content3
...// after dom

介绍两个 primeng 两个很有意思的组件,我们经常会用到这两个.

    I am Header
    I am Footer


//其实在Panel 内部定义了这样的两个东西，此处省略若干行，

@Component({
  selector: "p-header",
  template: "",
})
export class Header {}

@Component({
  selector: "p-footer",
  template: "",
})
export class Footer {}