1

我正在学习 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>？

谢谢 ：）

4

2 回答 2

2

改变

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

至

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

然后将其用作

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

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

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

于 2021-05-22T06:45:20.897 回答
0

为了使其成为“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>
于 2021-05-22T06:16:23.877 回答