-
Notifications
You must be signed in to change notification settings - Fork 672
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:util): export stringTemplateOutlet (#324)
- Loading branch information
Showing
4 changed files
with
77 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>; | ||
} | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>; | ||
} | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters