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

【问题标题】：How to hide custom Angular 12 selector in browser view如何在浏览器视图中隐藏自定义 Angular 12 选择器
【发布时间】：2021-05-22 14:45:20
【问题描述】：

我正在学习 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 风格中的几件事。

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

谢谢:)

【问题讨论】：

我很确定你不能......我见过的任何一个视频或教程都没有远程谈论过这个。但是您可以向组件添加一个类，只需放置一个类标签或通过组件本身。
这就是 Angular 的工作原理。但是你能在中尝试class="list-group-item" 看看它是否有效。
如果我直接在自定义 HTML 标签上添加一个类，它也会被 Bootstrap 破坏。也许这是 CS 框架的问题？
是一个虚拟组件，它不会破坏任何样式。要具体。还假设一个组件具有多个根元素。如果是一个根元素，那么您可以直接使用它。为什么需要 app-appreil 组件？
将特定数据绑定到每个<app-appareil> 组件。

标签： javascript angular angular12

【解决方案1】：

改变

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

到

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

然后把它当作

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

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

为了获得更好的语义，您可能希望进行进一步的更改并使用内容投影，但从有限的信息来看，这并不清楚，而且无论如何超出了问题的范围。

【讨论】：

它工作得很好，我只需要更改嵌套组件模板，通过在父模板中替换 <li> 来删除他的类，就像你说的那样。非常感谢:)

【解决方案2】：

要使其成为“Angular 方式”，需要更改方法。

假设您有一组从您的组件返回的设备名称 (appareilNames)：

public get deviceNames(): Array<string> { ... }

相应的标签结构可以实现如下：

<ul class="list-group">
  <li *ngFor="let deviceName of deviceNames"> <!-- iterate on each device name -->
    <app-appareil [appareilName]="deviceName"></app-appareil> <!-- use each name to create a component with it -->
  </li>
</ul>

【讨论】：

这不是 OP 想要的。 OP 想在构建时隐藏 app-appareil。
@SagarV 我认为隐藏它不适合这种情况，所以我建议更改HTML的结构。