https://github.com/sawyerbutton/angular-content-projection
Angular content Projection inherited from AngularJS Transclusion
https://github.com/sawyerbutton/angular-content-projection
Last synced: about 1 year ago
JSON representation
Angular content Projection inherited from AngularJS Transclusion
- Host: GitHub
- URL: https://github.com/sawyerbutton/angular-content-projection
- Owner: sawyerbutton
- Created: 2018-10-23T02:00:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T02:55:45.000Z (over 7 years ago)
- Last Synced: 2025-02-07T04:41:14.153Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-content-projection
## Angular 内容投影
### `Transclusion`
> `Transclusion`(嵌入包含)原本是AngularJs(1.x)中的概念，随着Angular2+的推出，`Transclusion`这一单词可能已经消失了，但是其根本概念并没有丢失
> 从本质上来说，`Transclusion`在Angular中就是获取node节点或者html的内容并将其插入模板或者一个特定的切入点中
> 该概念现在通过Web API(如Shadow DOM)在Angular中完成，称为`Content-Projection`
### AngularJS `Transclusion`
> `transclusion`在AngularJS中的实现类似于`.directive`API
> 在AngularJS中可以指定一个插槽进行内容转换
#### 单槽`transclusion`
```
function myComponent() {
scope: {},
transclude: true,
template: `
`
};
angular
.module('app')
.directive('myComponent', myComponent);
```
> 使用`myComponent`指令
```html
This is my transcluded content!
```
> 编译后的HTML文件为
```html
This is my transcluded content!
```
#### 多槽`transclusion`
> 在AngularJS1.5+后可以使用`Object`定义多个`entry point`
```angularjs
function myComponent() {
scope: {},
transclude: {
slotOne: 'p',
slotTwo: 'div'
},
template: `
`
};
angular
.module('app')
.directive('myComponent', myComponent);
```
> `myComponent`指令将上例中的`p`和`div`标记与相关的插槽相匹配
```html
This is my transcluded content!
Further content
```
> 导出后的Dom节点树为
```html
This is my transcluded content!
Further content
```
### Angular content Projection
> 将`transclusion`的概念移植到Angular2+中就成为了`content projection`
#### 单槽内容投影
> 移植之后的投影功能实现更加简洁和明了
```typescript
// my-component.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {}
```
```typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
投影内容
`
})
export class AppComponent {}
```
> 生成的DOM树为
```html
投影内容
```
### 多槽内容投影
> 与AngularJS中使用`transclude: {}`属性识别DOM引用不同，Angular2+使用更加直接的方法与DOM节点沟通
```typescript
//
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
组件标题
组件内容
`
})
```
> 这里假设存在my-component-title和my-component-content作为自定义组件
> 用以获取对组件的引用，并告诉Angular在适当的位置注入
> 在引用时需要明确``标签的`select=''`属性
```typescript
// my-component.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
Title:
Content:
`
})
```
> 事实上，在声明要投影的内容时不必像上述那样使用自定义元素
> 可以使用常规元素并以类似于`document.querySelector`的对话方式来定位投影元素
```typescript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
组件标题
组件内容
`
})
```
```typescript
// my-component.component2.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Title:
Content:
`
})
```
> 生成的DOM树为
```html
Title:
组件标题
Content:
组件内容
```