专栏首页Jerry的SAP技术分享Angular自定义structural指令的一个例子

Angular自定义structural指令的一个例子

The is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a JavaScript if-block:

if (someCondition) {
  statement1;
  statement2;
  statement3;
}

Without those braces, JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block. The satisfies a similar need in Angular templates.

编写一个功能和NgIf相反的指令:

源代码如下:

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

/**
 * Add the template content to the DOM unless the condition is true.
 */

/* The directive's selector is typically the directive's 
attribute name in square brackets, [appUnless]. The brackets define a CSS attribute selector.
*/
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  /*
  A simple structural directive like this one creates an
  embedded view from the Angular-generated <ng-template> and
   inserts that view in a view container adjacent to the directive's original <p> host element.
  */

  /*
  You'll acquire the <ng-template> contents with a TemplateRef and access the view container through a ViewContainerRef.
  */
  constructor(
    // 访问<ng-template>内容
    private templateRef: TemplateRef<any>,
    // 访问view container
    private viewContainer: ViewContainerRef) { }

    /*
    The directive consumer expects to bind a true/false 
    condition to [appUnless]. That means the directive needs an appUnless property, decorated with @Input
    */
  @Input() set appUnless(condition: boolean) {
    // 如果condition不满足才显示view
    /*
    Angular sets the appUnless property whenever the value of 
    the condition changes. Because the appUnless property does work, it needs a setter.
    */
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

在App module里的declarations区域导入新建的Directive:

在Component HTML里消费这个自定义指令:

<h2 id="appUnless">UnlessDirective</h2>
<p>
  The condition is currently
  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
  <button
    (click)="condition = !condition"
    [ngClass] = "{ 'a': condition, 'b': !condition }" >
    Toggle condition to {{condition ? 'false' : 'true'}}
  </button>
</p>
<p *appUnless="condition" class="unless a">
  (A) This paragraph is displayed because the condition is false.
</p>

<p *appUnless="!condition" class="unless b">
  (B) Although the condition is true,
  this paragraph is displayed because appUnless is set to false.
</p>

最后的效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何通过url访问的方式获取HANA report的元数据metadata

    https://:44356/sap/opu/odata/sap/CRM_ANA_ODATA_REPORTS_SRV/IReports(‘3440B5B173A...

    Jerry Wang
  • 如何通过url访问的方式获取HANA report的元数据metadata

    https://:44356/sap/opu/odata/sap/CRM_ANA_ODATA_REPORTS_SRV/IReports(‘3440B5B173A...

    Jerry Wang
  • Kubernetes里关于Helm的一些练习和操作步骤

    helm init --tiller-namespace --service-account access

    Jerry Wang
  • 如何通过url访问的方式获取HANA report的元数据metadata

    https://:44356/sap/opu/odata/sap/CRM_ANA_ODATA_REPORTS_SRV/IReports(‘3440B5B173A...

    Jerry Wang
  • 如何通过url访问的方式获取HANA report的元数据metadata

    https://:44356/sap/opu/odata/sap/CRM_ANA_ODATA_REPORTS_SRV/IReports(‘3440B5B173A...

    Jerry Wang
  • Kubernetes里关于Helm的一些练习和操作步骤

    helm init --tiller-namespace --service-account access

    Jerry Wang
  • gorm入门之概述

    什么是orm?简单说,ORM 就是通过实例对象的语法,完成关系型数据库的操作的技术,是"对象-关系映射"(Object/Relational Mapping) ...

    大话swift
  • 在Web站点中创建和使用Rss源

    Rss是将你Web站点的内容与其他人分享的标准方式。Rss代表着:Really Simple Syndication。它不过是一个标准化的XML标记,用于描述你...

    张子阳
  • 去中心化的交易所与Atmosphere

    去中心化的交易所又叫分布式数字资产交易平台,就是在区块链上直接交换,加密货币会直接发回使用者的钱包,或是保存在区块链上的智能合约。

    rectinajh
  • 去中心化交易所行业分析

    自比特币诞生以来,数字货币交易所经历着一轮又一轮的发展和洗牌,中心化交易所和去中心化交易所之争愈演愈烈。中心化交易所的安全问题广遭诟病,而去中心化交易所的交易体...

    花间一壶酒.独酌无相亲

扫码关注云+社区

领取腾讯云代金券