Angular 6 中的 @HostBinding 和 @HostListener
在 Angular 6 中，@HostBinding 和 @HostListener 是两个非常有用的指令。它们可以帮助我们实现可重用的组件，同时也可以让我们的代码更具可读性和可维护性。
@HostBinding 指令
@HostBinding 可以帮助我们绑定宿主元素的一个或多个属性，如样式、类和属性等。它可以让我们在组件中对宿主元素进行更多的控制。
我们可以使用 @HostBinding 来控制组件的样式。例如，我们可以使用 @HostBinding 实现一个带有特定样式的按钮组件：
------ - ---------- ----------- - ---- ---------------- ------------ --------- ------------- ------------ -------------------------- ---------- -------------------------- -- ------ ----- --------------- - ------------------------- -------- - ----- --------------------------------- ------- - ----- ------------------------------ -------- - ------ -
在上面的代码中，我们使用了 @HostBinding 来控制这个按钮组件的样式。我们使用了三个不同的属性来控制不同的样式，它们分别是 cssClass、primary 和 disabled。通过这样的方式，我们可以非常方便地控制按钮组件的样式，并且可以轻松地重用这个组件。
@HostListener 指令
@HostListener 可以帮助我们监听宿主元素的一个或多个事件。例如，我们可以使用 @HostListener 实现一个带有点击事件的按钮组件：
------ - ---------- ------------ - ---- ----------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- -
---------------------- --------- -
------------------
-
-在上面的代码中，我们使用了 @HostListener 来监听按钮组件的点击事件，并在点击时弹出一个消息框。通过这样的方式，我们可以非常方便地添加各种事件监听器，并且可以轻松地重用这个组件。
总结
@HostBinding 和 @HostListener 是 Angular 6 中非常有用的指令，它们可以帮助我们实现可重用的组件，并让我们的代码更具可读性和可维护性。通过掌握 @HostBinding 和 @HostListener，我们可以更加轻松地开发 Angular 6 应用程序。
示例代码
本文中的示例代码可以在下面的 GitHub 仓库中找到：
https://github.com/example/angular-hostbinding-hostlistener-example
欢迎大家 star 和提出宝贵意见。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649ad61148841e98947c5fd5