angular 创建指令_在Angular中创建基于角色的显示/隐藏指令

angular 创建指令

If you are in the Angular realm for a good long time, you must be familiar with the concept of directives. Directives are one of the basic building blocks of Angular. It is everywhere. Even components in Angular are in directives with a template.

如果您长期处于Angular领域，则必须熟悉指令的概念。 指令是Angular的基本组成部分之一。 它无处不在。 甚至Angular中的组件都在带有模板的指令中。

Directives basically are typescript classes with @Directive decorators. From the Angular documentation, you can see there are three types of directives

指令基本上是带有@Directive装饰器的打字稿类。 从Angular文档中 ，您可以看到三种类型的指令

1. Components: directives with a template.
   组件：带有模板的指令。
2. Structural directives: change the DOM layout by adding and removing DOM elements.
   结构化指令：通过添加和删除DOM元素来更改DOM布局。
3. Attribute directives: change the appearance or behavior of an element, component, or another directive.
   属性指令：更改元素，组件或其他指令的外观或行为。

Some common directives that must be familiar to you are: *ngFor(structural), *ngIf(structural), hidden(attribute), NgStyle(attribute), etc. The scope of this article will be on the last type: Attribute directives.

您必须熟悉的一些常见指令是： *ngFor(structural) ， *ngIf(structural) ， hidden(attribute) ， NgStyle(attribute)等。本文的范围将在最后一种类型：属性指令。

Recently on one of my projects, I had a requirement for a simple role-based access system. In one of my modules, the add, edit, delete, or update actions were based on the user role which is determined at the admin level and is configurable. The access information is available on the user login.

最近在我的一个项目中，我需要一个简单的基于角色的访问系统。 在我的一个模块中，添加，编辑，删除或更新操作是基于用户角色的，该用户角色是在管理员级别确定的并且是可配置的。 访问信息在用户登录名上可用。

How would you implement this?

您将如何实施？

初步想法 (Initial Thoughts)

Initial thoughts were to use *ngIf or [hidden] directives in all components with custom logic inside the component's controller. It looked easy to implement. But how reusable would it be? What if you want to use it in multiple modules, components? Yes, time to introduce a directive!

最初的想法是在所有组件中使用*ngIf或[hidden]指令，并在组件控制器内使用自定义逻辑。 它看起来很容易实现。 但是它将具有多大的可重用性？ 如果要在多个模块，组件中使用该怎么办？ 是的，该引入指令了！

创建自定义角度指令 (Create a Custom Angular Directive)

Like I stated above, directives are typescript classes. You can create a file, conveniently name it access-control.directive.ts and create your class manually. But I am going to take help from Angular CLI to do this.

就像我上面所说的，指令是打字稿类。 您可以创建一个文件，将其方便地命名为access-control.directive.ts并手动创建您的类。 但是，我将从Angular CLI寻求帮助。

ng generate directive access-control

You now have the simplest directive ever, which doesn’t do anything just yet.

您现在有了有史以来最简单的指令，该指令目前还没有执行任何操作。

Before we jump in and start editing our directive, let’s have a look at our access control data that we received from our REST API.

在进入并开始编辑指令之前，让我们看一下从REST API接收到的访问控制数据。

From the data above, it is evident that our directive needs to get at least two pieces of information from the host, (the component where the directive is used):

从上面的数据可以明显看出，我们的指令需要从主机(使用该指令的组件)中至少获取两条信息：

1. Type of module (users or articles)
   模块类型(用户或文章)
2. Type of access (create, edit, delete, or read)
   访问类型(创建，编辑，删除或读取)

Let’s take a step back and recall that components are indeed directives, thus you can pass data to a directive the same way as you do to a component. We can use a @Input decorator. We also need to implement NgOnInit in our directive for us to be able to check access controls on the initialization of the component.

让我们退后一步，回想一下组件确实是指令，因此您可以像对组件一样以相同的方式将数据传递给指令。 我们可以使用@Input装饰器。 我们还需要在指令中实现NgOnInit ，以便我们能够检查组件初始化的访问控制。

Great! Let’s implement our logic to conditionally show/hide the host element, (the component our directive is hosted on).

大！ 让我们实现我们的逻辑，以有条件地显示/隐藏host元素(托管指令的组件)。

We have imported ElementRef from @angular/core which we can use to access DOM elements and manipulate. Be careful when you use ElementRef, as you are accessing DOM elements directly, which can attract XSS attacks. On the component initialization, we are fetching role data, crosschecking with our module and access type combination, and making the element show/hide.

我们从@angular/core导入了ElementRef ，可用于访问DOM元素和进行操作。 使用ElementRef时要小心，因为直接访问DOM元素会吸引XSS攻击。 关于组件初始化，我们要获取角色数据，使用我们的模块和访问类型组合进行交叉检查，并使元素显示/隐藏。

Note: I am fetching the access data from the AuthService class which is an Angular service I created. You can have your custom login to do the same.

注意：我正在从AuthService类中获取访问数据，该类是我创建的Angular服务。 您可以使用自定义登录名进行相同的操作。

Let’s now see how we can use this in one of our components.

现在让我们看看如何在我们的组件之一中使用它。

As easy as that! The button above will now show/hide based on the user access controls. You can use our accessControl directive in any of the create, edit, delete, read navigation buttons/components. It’s highly reusable.

那样简单！ 现在，上面的按钮将根据用户访问控制显示/隐藏。 您可以在任何创建，编辑，删除，阅读导航按钮/组件中使用我们的accessControl指令。 它是高度可重用的。

There are plenty of other use cases for directives. You can do things like listening for events on the host and reacting to the same, apply styles to the host, and more. I hope you will create something beautiful with it.

指令还有许多其他用例。 您可以执行诸如侦听主机上的事件并对其做出React，将样式应用于主机等操作。 希望您能用它创造出美丽的东西。

For more articles like this 👇

想要更多类似这样的文章

Happy hacking!

骇客入侵！

翻译自: https://medium.com/better-programming/create-a-role-based-show-hide-directive-in-angular-8d83fca2eb69

angular 创建指令