Angular结构型指令

最新推荐文章于 2024-11-18 12:10:44 发布

weixin_34212762

最新推荐文章于 2024-11-18 12:10:44 发布

阅读量153

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3412211/blog/895334

版权

2019独角兽企业重金招聘Python工程师标准>>>

结构型指令就是对DOM的操作，放在模板组件中它是表达式，单独提取出来它被称为结构型指令。

结构型指令的职责是HTML布局。它们塑造或重塑DOM的结构，比如添加、移除或维护这些元素。所有的包括自定义的结构型指令在模版中使用时必须加*前缀。

<div *ngIf="hero" >{{hero.name}}</div>

星号(*)这个简写方法是一个微语法，而不是通常的模板表达式。 Angular会解开这个语法糖，变成一个<ng-template>标记，包裹着宿主元素及其子元素。

自定义结构型属性涉及的东西和属性型指令差不多，都是@Directive、CSS选择器、@Input。但是结构型指令需要访问组件模版内容，和渲染组件模板内容的工具，即@angular/core中的TemplateRef和ViewContainerRef服务。

import ...
import { TemplateRef, ViewContainerRef } from '@angular/core';

@Derective({selector: '[指令名]'})
...
export class ...

constructor (
  private templateRef: TemplateRef,
  private viewContainerRef: ViewContainerRef) {}

@Input('别名')                                //通过viewContainerRef来渲染组件模板内容
  set 绑定的属性名(形参: 值类型boolean) {       //假设这里是boolean类型
    if (形参) ｛
      this.viewContainerRef.createEmbeddedView(this.templateRef);  //this.templateRef这个组件的模板
    } else {...}
  }

对于结构型指令常用到setter和getter拦截输入属性，setter可以对@Input获取的属性进行在封装处理，再通过getter返回要设置的属性值。

转载于:https://my.oschina.net/u/3412211/blog/895334