高级 Angular 组件模式 (4)

lovXin 发布于2019-08-26 11:44 / 2861人阅读

摘要：命名冲突不仅存在于指令的选择器之间，同时也会存在于指令的和属性，当这些属性名一样时，并不会进行提示，它会按原本的逻辑正常工作。目标避免存在于绑定在相同元素上的多个指令上的命名冲突。

04 Avoid Namespace Clashes with Directives

原文: Avoid Namespace Clashes with Directives

提示

在同一个html元素上绑定多个指令可能会造成命名冲突。

命名冲突不仅存在于指令的选择器之间，同时也会存在于指令的Inputs和Outputs属性，当这些属性名一样时，Angular并不会进行提示，它会按原本的逻辑正常工作。这种情况有时候是我们希望看到的，有些时候却不是。

目标

避免存在于绑定在相同元素上的多个指令上的命名冲突。

实现

因为toggle和withToggle指令都绑定于元素，我们将通过为它们增加一个label属性来说明问题。

首先我们设置一个label属性，比如：

这个label属性的值会同时绑定在每个指令上，如果想要为其中的某个指令多带带绑定，只能通过使用prefix(前缀)来实现。

Angular官方提供的规范指南也警示了这一点，当你在使用prefix修饰指令的名称时，也需要注意使用prefix来修饰Input和Output属性的名称。

Note: 当使用Output属性重写原生DOM元素的事件和使用Input属性重写原生元素的属性时，请额外注意，没有任何方式可以获知别人在他们编写的应用或者库中使用的命名，但是你可以很轻易的知道的具体命名的大体规则是什么，并且不要重写它们，除非你有意为之。

增加prefix的一种方式是在每个指令的label属性的装饰器内增加一个字符串参数，如下：

// In withToggle.directive.ts
@Input("withToggleLabel") label;

// In toggle.directive.ts
@Input("toggleLabel") label;

但是这种解决方案的前提时，你至少能够更改存在命名冲突中的一个或多个指令的源码。如果在两个第三方库中存在命名冲突，这种情况是最棘手的，我们不在这里讨论它们。

成果

在线代码演示（自备梯子）: https://stackblitz.com/edit/adv-ng-patterns-04-namespace-clashes

译者注

原文中关于最后一段提出的关于在多个第三方库中存在的命名冲突的场景，作者提供做出具体的解决方案，我在这里简单分享一下自己对于这种情况的解决方案：

通常这种情况比较少见，但是万一存在这种情况，我们可以通过创建一个新的wrapper指令来封装第三方指令，wrapper指令提供与第三方指令一样的接口属性，但是因为我们对于wrapper指令有绝对的控制权，我们可以提供统一的prefix来修饰这些接口属性，从而达到解决冲突的效果。

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

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

高级 Angular 组件模式 (6)

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

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

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

Corwien 2019-08-21 18:47 评论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 组件模式 (2)

摘要：相关话题装饰器将会返回在组件标签包含的内容中，第一个符合选择器的子组件或者子指令的引用，比如。或者装饰器是用来获取在组件内部模板中使用的单个或者多个组件的。 02 Write Compound Components 原文: Write Compound Components 目标我们需要实现的需求是能够使使用者通过组件动态的改变包含在它内部的内容。实现我们可以把toggle抽象...

Taste 2019-08-21 18:47 评论0 收藏0