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

Question

我正在学习Angular12，我对框架运行有一些问题。我创建了一个新项目，添加了 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 风格的一些东西。

你知道在这种情况下是否可以 hide/remove 我的浏览器视图的这些自定义组件仅获取直接位于 <ul> 内的 <li> 标签，而不是这些 <app-appareil> ?

谢谢:)

Answer 1

要使其成为“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>

Answer 2

改变

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

至

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

然后用作

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

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

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

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

How to hide custom Angular 12 selector in browser view

javascript

angular

angular12