Angular2 - 指令 - 第 2 部分

在哪里可以找到 Angular2 - 指令 - 第 1 部分？

请查看“Angular2 - 指令 - 第 1 部分”，以获取关于第 1 部分的更多信息。

好的，我已经阅读了第 1 部分，但仍然不明白在什么情况下应该使用属性指令，您能告诉我吗？

当我们想要修改现有 HTML 标签的行为或向其添加新功能时，属性指令是一个合适的解决方案。

请看下面的截图

要显示此工具提示，我们需要将 HTML 标签的 title 属性设置为

在这种情况下，我们想要更改 a 标签的行为。我的意思是，悬停在此标签上将会显示如下工具提示：

所以，我们需要定义一个新的工具提示指令（这是一个属性指令），这个指令将修改 a 标签的默认行为。在代码中，我们更改为：

在这段代码中，我们添加了 a 标签的新 tooltip 属性。

我可以注册附加到我的指令的 DOM 元素的事件监听器吗？

是的，在指令内部，我们可以注册附加到我们指令的 DOM 元素的事件监听器，如下例所示：

让我们更改 HightlightBaseOnFirstName 指令的行为。适当的颜色将被设置为 DOM 元素的背景色。

export class HightlightBaseOnFirstName {
    @Input() color: string = "white";
    @Input() text: string = "Tu";
    private dom: any = null;
    constructor(ui: ElementRef) {
        this.dom = ui.nativeElement;
    }
    @HostListener('mouseenter') onMouseEnter() {
        this.dom.style.backgroundColor = this.color;
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.dom.style.backgroundColor = "";
    }
}

在这段代码中，我们添加了 2 个新的监听器，分别名为 mouseenter 和 mouseleave。这些与 DOM 元素的 mouseenter 和 mouseleave 事件意义相同。

让我们再次编译并运行该应用程序。我们看到默认情况下背景是白色的，当悬停在 first-name 上时，它会改变，如下所示：

好的，太棒了，那么组件（带有模板的指令）呢？

当我们需要重用整个区域及其自身的业务逻辑时，我们使用这种类型的指令。

在我们的例子中，摘要部分可以实现为组件，并在 users.html 文件中使用它。

好的，你能告诉我怎么做吗？

好的，让我们这样做。

我创建了一个名为“user-detail”的新组件，如下所示：

添加新的 userDetail.html

<div *ngIf="user!=null">
    <h3>Summary of {{user.firstName}}</h3>
    <form class="form-horizontal form-label-left ">
        <div class="form-group ">
            <label>First Name</label>
            <input class="form-control " [(ngModel)]="user.firstName " name="first " />
        </div>
        <div class="form-group ">
            <label>Last Name</label>
            <input class="form-control " [(ngModel)]="user.lastName " name="last " />
        </div>
    </form>
</div>

和 userDetail.ts

import {Component, Input} from "@angular/core";
@Component({
    selector: "user-detail",
    templateUrl: "src/userDetail.html"
})
export class UserDetail {
    @Input() user: any = null;
}

然后，我们更新 users.html 如下所示：

在 users.html 中，我们用单行替换了大量标记。“user-detail”必须与 UserDetail 指令的“selector”属性匹配。

通过这种方式，我们可以将一个复杂的页面划分为许多较小的指令。每个指令都有其自身的责任，可重用的组件/指令，并且代码更容易在未来进行维护。

那么传递输入和输出参数呢？

这与属性指令的工作方式相同。

那么组件的其他属性作为指令呢？

这与 angular 中的组件工作方式相同。

那么结构指令呢？

结构指令通过添加和删除 DOM 元素来更改 DOM 布局。如下例所示，我们使用 NgIf 来显示页面的一部分内容：

<div *ngIf="user!=null">
    <h3>Summary of {{user.firstName}}</h3>
    <form class="form-horizontal form-label-left ">
        <div class="form-group ">
            <label>First Name</label>
            <input class="form-control " [(ngModel)]="user.firstName " name="first " />
        </div>
        <div class="form-group ">
            <label>Last Name</label>
            <input class="form-control " [(ngModel)]="user.lastName " name="last " />
        </div>
    </form>
</div>

让我们运行该应用程序，第一次，user 属性为 null

在这种情况下，<user-detail> 是空的。

现在，让我们尝试选择一个用户，然后再次检查

一个新的与“用户摘要”部分相对应的 DOM 被添加到“<user-detail>”中。这就是 NgIf（结构指令）的工作方式。

还有其他结构指令吗？

还有一些其他的，例如：NgFor、NgSwitch。有关结构指令的更多信息，请访问 angular.io

在哪里可以找到更多 Angular2 系列的文章？

请查看下面的其他文章列表

• 概述：介绍 Angular2
• 路由：了解 Angular2 如何在页面/组件之间导航
• 组件：了解 Angular2 中的组件/页面。
• 绑定：学习 Angular2 如何在 UI 上显示数据并接收来自用户的输入数据。
• 指令：学习如何创建可在整个应用程序中重用的可重用组件/控件。
• 整合在一起：使用我们学到的关于 Angular 的知识来构建示例演示。

感谢阅读。

CodeProject

注意：如果您认为本文有用，请评价并分享给您的朋友，我非常感谢