[Angular Directive] Write a Structural Directive in Angular 2
Angular in Write directive
2023-09-14 09:00:52 时间
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template>
elements, but they're easy and extremely powerful once you undrestand the concepts.
What is stuctural looks like:
<h1 *structure>This is structure directive</h1> <!-- Equals to --> <template structure> <h1>This is structure directive</h1> </template>
So Structural Directive is just something shorthand for template.
import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core'; @Directive({ selector: '[structure]' }) export class StructureDirective { @Input('structure') num; constructor(private template: TemplateRef<any>, private view: ViewContainerRef) { } ngAfterContentInit() { let num: number = Number(this.num); if (num > 0) { while (num --){ this.view.createEmbeddedView(this.template); } } } }
<h1 *structure="'4'">This is structure directive</h1>
So it will print out:
相关文章
- [Angular 14] Providers in Angular Route
- [Docker] Running Multiple Containers for an Angular, Node project
- [Angular] Set Metadata in HTTP Headers with Angular HttpHeaders
- [Angular] How to get Store state in ngrx Effect
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
- [Angular Directive] 3. Handle Events with Angular 2 Directives
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular 2] Template property syntax
- [Angular] Create a custom validator for reactive forms in Angular
- [Angular] Intercept HTTP requests in Angular
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular Unit Testing] Testing Pipe
- [Angular] Observable.catch error handling in Angular
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
- [Angular 2] Refactoring mutations to enforce immutable data in Angular 2
- [AngularJS] Angular 1.3 $submitted for Form in Angular
- 谈谈Angular关于$watch,$apply 以及 $digest的工作原理
- 使用Angular和Nodejs搭建聊天室
- Angular rxjs源代码分析:range(0, 10)的实现
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular 为什么要引入 injection token 的概念
- 如何找到Angular应用的某个directive是属于哪一个Angular module
- 如何使用Angular FormBuilder