时间戳

首页 > 解决方案 > 插入动态组件时，Angular不会在伪元素之前和之后插入

angular - 插入动态组件时，Angular不会在伪元素之前和之后插入

问题描述

我正在构建一个 Angular 11 应用程序。在这个应用程序中，我正在构建一个基于不同级别的 OL 元素的组织树。我正在使用 CSS 中的 ::before 和 ::after 伪元素绘制节点线。

问题是我在主要的三个组件中使用节点组件来绘制 OL 元素，并且这样做浏览器不显示 ::before 和 ::after 元素（但显示树）来挂钩。

如果我只使用静态 OL 树而不是动态的，这一切都很好。所以我的问题是，我可以强制 Angular 以某种方式添加之前和之后的元素吗？

我的 TreeOrgChart 组件

<ol class="component-orgchart" *ngFor="let item of collection">
  <li>
    <div class="node-title">
      {{item.label}}
    </div>
    <app-tree-orgchart-node [model]="item" [mode]="mode"></app-tree-orgchart-node>
  </li>
</ol>

我的 TreeOrgchartNode 组件

<ol *ngIf="model.children.length > 0">
  <li (click)="routerNode(node)" *ngFor="let node of model.children">
    <div class="node-title">
      {{node.label | capitalize}}
    </div>
    <app-tree-orgchart-node [model]="node" [mode]="mode"></app-tree-orgchart-node>
  </li>
</ol>

标签： angular

解决方案

推荐阅读