NG重复NG嵌入在指令
在使用Angular开发前端应用时，我们常常会使用指令。指令是一个带有@Directive元数据装饰器的类，它用于添加、修改或删除DOM元素。通常情况下，我们可以通过在模板中引用这个指令来达到想要的效果。例如：
---- ------------------------ -- ------------
上述代码中，我们使用appHighlight指令来将该元素的背景色设置为黄色。但是，如果我们需要将同样的指令应用于多个元素，我们又该怎么做呢？
一种解决方法是在每个元素上重复使用指令。例如：
---- ------------------------ -- ------------ -- ----------------- ----------- -- ---------- ----- ---------------- ----------- -- ------ ----------
虽然这样做可以达到相同的效果，但是却不够优雅。更好的解决方案是将指令嵌套在一个容器元素中，并使用ng-container指令来应用该容器内的所有子元素。例如：
------------- ------------- ---------------- -- ------------ ------- ----------- -- ---------- --------- ----------- -- ------ ---------- ---------------
这样做的好处在于，我们只需要将指令应用于一个容器元素，就能够同时应用于该容器内的所有子元素。这种方式不仅更加优雅，而且还可以帮助我们提高代码的可维护性。
除了ng-container指令外，我们还可以使用其他指令来实现类似的效果。例如 *ngIf 和 *ngFor 指令都支持嵌套。下面是一个例子，演示如何在ngFor中嵌套ngIf：
----
--- ----------- ---- -- ------ -------------------------- ---------------- -
----- ------------------------------
-- --------- --
-----
-----上述代码中，我们使用ngFor指令循环遍历一个名为items的数组，并将每个元素渲染成一个列表项。列表项上还包含了一个ngClass指令，用于动态设置元素的class属性。此外，我们还使用了ngIf指令，当数据项的isNew属性为真时，该项才会显示“New!”文本。
总之，通过将指令嵌套在一个容器元素中，并使用ng-container等指令来应用该容器内的所有子元素，我们可以使代码更加优雅并提高可维护性。在开发Angular应用时，我们应该充分利用这些技巧，以便更好地组织和管理代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24470