时间戳

首页 > 解决方案 > 如何在浏览器视图中隐藏自定义 Angular 12 选择器

javascript - 如何在浏览器视图中隐藏自定义 Angular 12 选择器

问题描述

我正在学习 Angular 12，我对框架操作有一些问题。我创建了一个新项目，添加了 Bootstrap 5 并创建了一些组件。当我像这样将一个组件嵌套在另一个组件中时：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes appareils</h2>
      <ul class="list-group">
        <app-appareil [appareilName]="appareilOne"></app-appareil>
        <app-appareil [appareilName]="appareilTwo"></app-appareil>
        <app-appareil [appareilName]="appareilThree"></app-appareil>
      </ul>
    </div>
  </div>
</div>

我不明白为什么我仍然在浏览器检查器视图中看到自定义选择器： Angular browser view

它破坏了我的 Boostrap 风格中的几件事。

您是否知道是否可以隐藏/删除我的浏览器视图的这些自定义组件，以便在这种情况下仅获取<li>直接在内部的标签<ul>而不是这些标签<app-appareil>？

谢谢 ：）

标签： javascriptangularangular12

解决方案

改变

@Component({
    selector: "app-appareil"
})

至

@Component({
    selector: "li[appAppareil]"
})

然后将其用作

  <ul class="list-group">
    <li appAppareil [appareilName]="appareilOne"></li>
  </ul>

通过使用属性选择器，我们可以避免包装组件标记（您不能“删除”），并且我们保留了 DOM 本身的语义。

可能会获得更好的语义，您需要进行进一步的更改并使用内容投影，但是从有限的信息中并不清楚这无论如何超出了问题的范围。

推荐阅读