高级 Angular 组件模式 (5)

JouyPub 发布于2019-08-22 14:51 / 1325人阅读

摘要：实现模板引用变量是获取某个元素组件或者指令引用的一种方式，这个引用可以在当前的视图模板中的任何地方使用。它们通常是以或者的语法声明的。成果在中，我通过打印模板引用变量所指向的类的名字来演示它所代表的引用。

05 Handle Template Reference Variables with Directives

原文: Handle Template Reference Variables with Directives

在之前的例子中，已经出现多次使用template reference variable（模板引用变量）的场景，现在让我们来深入研究如何通过使用模板引用变量来关联某个具体指令的引用。

目标

在视图模板内，获取一个指令的引用。

实现

模板引用变量是获取某个元素、组件或者指令引用的一种方式，这个引用可以在当前的视图模板中的任何地方使用。它们通常是以#baseToggle或者#myToggle="toggle"的语法声明的。一旦声明，在视图模板的任何地方就可以使用它。

Note: 请注意作用域的问题，如果你使用或者是一个结构性指令，比如*ngIf或者*ngFor，它会在这个模板上创建一个新的作用域，之后在其内部声明的模板引用变量无法在该模板作用域以外使用。

模板引用变量的解析顺序通常为：

一个指令或者组件通过它自身的exportAs属性，比如#myToggle="toggle"

声明于以自定义标签存在的组件，比如

原生html元素，并且没有任何组件绑定与它，比如

之后我们来分别看3个例子。

指令与exportAs

指令可以在它的元数据中声明exportAs属性，这个属性表示它被这个模板引用变量所标识，如下：

// toggle.directive.ts
@Directive({
  selector: "[toggle]",
  exportAs: "toggle",
})
export class ToggleDirective { ... }

之后我们可以在视图模板中直接使用toggle来获取指令的引用，如下：

// app.component.html

// myTemplateRefVar is the ToggleDirective

组件

对于每一个html元素，只会有一个组件与之对应。当一个组件绑定于一个元素时，那么声明的模板引用变量将会被解析为当前元素上所绑定的组件，比如：

// app.component.html

// toggleOn is the ToggleOnComponent

HTML元素

如果没有组件与元素绑定，模板引用变量会指向当前这个html元素。

// app.component.html

// someDiv is an HTMLDivElement

成果

Note: 在stackblitz中，我通过打印模板引用变量所指向的类的名字（constructor.name）来演示它所代表的引用。
在线代码演示（自备梯子）: https://stackblitz.com/edit/adv-ng-patterns-05-template-ref-variables

译者注

这篇文章作者关于模板引用变量，仅仅介绍了关于如何声明和在视图模板中如何使用，我在这里再补充一些，如何在组件或者指令类的内部使用。

在类内部获取模板引用变量所指向的引用是通过使用ViewChild装饰器完成的，比如上述文章中的第二个例子:

@Component({
  selector: "my-app",
  template: `
    
  `,
})
export class AppComponent {
  @ViewChild("myDiv")
  myDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.myDiv);
  }
}

这里的myDiv即指向当前模板引用变量所指向的html元素。

Note: 在类中获取模板引用变量所指向的引用时，请格外注意你期望获取的引用类型，在例子中，我们期望获取html元素，因此这里的引用类型是ElementRef，如果是指令或者组件，则分别要对应其类型的Type。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92930.html

高级 Angular 组件模式 (1)

摘要：原文如那样，我们将使用一个相对简单的组件来说明这些模式。组件的职责是仅仅是管理一个简单的布尔值状态属性。文件夹并且特别是，将针对库在不同的情形下的使用做出相应的改变。写在前头 Angular到现在已经到5.x的版本了，对于MVVM框架我首先接触的是angularjs后来又转为react，之后换了工作因项目技术栈的原因又转换到之前的angularjs，在实际工作中实施了公司几个比较重要...

Corwien 2019-08-21 18:47 评论0 收藏0
高级 Angular 组件模式 (6)

摘要：为了适应表单校验的灵活性，我们使用这种模式会事半功倍，提供校验信息的组件仅仅声明渲染表单错误提示信息需要设计的状态变量即可，比如等等，对于错误信息的文案及样式，统统交由错误提示组件的使用者完成。 06 Use Render Props最近在React社区中引起了轰动，但是与之类似的模式在Angular中似乎并没有得到太多关注。我在之前写的文章提及过，TemplateRefs就是Ang...

caohaoyu 2019-08-26 11:55 评论0 收藏0
高级 Angular 组件模式 (7)

摘要：目标提供一些方法或指令给组件使用者，使其可以与所提供的元素交互并修改它们。这个指令拥有一个属性并与组件共享，该属性将决定属性的值是还是。 07 使用 Content Directives 原文: Use Content Directives 因为父组件会提供所有相关的 UI 元素（比如这里的 button），所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求，比如，...

chadLi 2019-08-23 12:15 评论0 收藏0
高级 Angular 组件模式 (3a)

摘要：同时，依赖注入机制是依附于组件本身存在的，并不依附于模板的层级关系，因此不会面临问题二的困扰。对于木偶组件本身，往往作为消费者存在，这种情况下使用机制可能会达到更好的效果。 03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components Using Dep...

Chiclaim 2019-08-21 18:47 评论0 收藏0
高级 Angular 组件模式 (3b)

摘要：原文的第四篇文章中的一个重要元素在上一篇文章中没有涉及，使用高阶组件中的常用模式可以将组件中的公用逻辑分离出来。同时，因为组件的模板并不存在任何的变动，我们可以将它转化为一个指令，这样我们可以以更加灵活的方式来使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

wums 2019-08-21 18:46 评论0 收藏0