Skip to content

Commit

Permalink
feat(module:util): export stringTemplateOutlet (#324)
Browse files Browse the repository at this point in the history
  • Loading branch information
cipchk authored Dec 17, 2018
1 parent 20920fc commit e8d9ed1
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/util/public_api.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './src/addon/string_template_outlet';
export * from './src/string/string';

export * from './src/time/time';
Expand Down
36 changes: 36 additions & 0 deletions packages/util/src/addon/index.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: stringTemplateOutlet
subtitle: String Template Outlet
type: Template
---

Simplify the use of string and embedded view template.

## DEMO

Build a `page-title` component and provide a `title` property, such as:

```html
<page-title title="Starbucks"></page-title>

<page-title [title]="ptTitleTpl">
<ng-template #ptTitleTpl>
<a class="text-success" href="https://www.starbucks.com/" target="_blank">Starbucks</a>
</ng-template>
</page-title>
```

Use `stringTemplateOutlet` to simplify the `title` property of the `page-title` component.

```ts
@Component({
selector: 'page-title',
template: `
<ng-template *stringTemplateOutlet="title">{{title}}</ng-template>
`
})
export class PageTitleComponent {
@Input() title: string | TemplateRef<void>;
}
```

36 changes: 36 additions & 0 deletions packages/util/src/addon/index.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: stringTemplateOutlet
subtitle: 字符串模板占位符
type: Template
---

简化字符串与嵌入式视图模板的使用方式。

## 示例

构建一个 `page-title` 组件,并提供 `title` 属性,比如:

```html
<page-title title="星巴克"></page-title>

<page-title [title]="ptTitleTpl">
<ng-template #ptTitleTpl>
<a class="text-success" href="https://www.starbucks.com/" target="_blank">星巴克</a>
</ng-template>
</page-title>
```

利用 `stringTemplateOutlet` 可以简化实现 `page-title` 组件的 `title` 属性。

```ts
@Component({
selector: 'page-title',
template: `
<ng-template *stringTemplateOutlet="title">{{title}}</ng-template>
`
})
export class PageTitleComponent {
@Input() title: string | TemplateRef<void>;
}
```

4 changes: 4 additions & 0 deletions src/site.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,10 @@ module.exports = {
'zh-CN': '类型',
'en-US': 'Type',
},
{
'zh-CN': '模板',
'en-US': 'Template',
},
],
module: '@delon/util',
defaultRoute: 'getting-started',
Expand Down

0 comments on commit e8d9ed1

Please sign in to comment.