如何解决如何在浏览器视图中隐藏自定义 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>
?
谢谢:)
解决方法
改变
@Component({
selector: "app-appareil"
})
到
@Component({
selector: "li[appAppareil]"
})
然后将其用作
<ul class="list-group">
<li appAppareil [appareilName]="appareilOne"></li>
</ul>
通过使用属性选择器,我们可以避免包装组件标记(您无法“删除”),并且我们保留了 DOM 本身的语义。
为了获得更好的语义,您可能希望进行进一步更改并使用内容投影,但由于信息有限且超出了问题的范围,这一点尚不清楚。
,要使其成为“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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。