CSS Angular 5 中在某些类中添加 ‘ng-star-inserted’ 是什么

在本文中，我们将介绍 Angular 5 中添加 ‘ng-star-inserted’ 的一些类是什么，以及它们的作用是什么。

阅读更多：CSS 教程

什么是 ‘ng-star-inserted’？

‘ng-star-inserted’ 是 Angular 5 中用于表示被注入的元素的类名之一。在 Angular 中，要动态插入元素，我们可以使用 ng-template 元素和 ViewContainerRef 来实现。当插入元素时，Angular 5 会将被注入的元素标记为 ‘ng-star-inserted’，以便我们可以在样式中进行特定的选择和样式调整。

‘ng-star-inserted’ 的作用

‘ng-star-inserted’ 类的主要作用是对被注入的元素应用特定的样式。当我们使用 ng-template 和 ViewContainerRef 动态插入元素时，可能会遇到一些样式或布局的问题。为了解决这些问题，我们可以使用 ‘ng-star-inserted’ 类来定制被注入元素的样式或调整其布局。

例子

假设我们有一个包含一些列表项的组件，并且我们希望在列表项之间动态插入一些额外的元素。我们可以使用 ng-template 来定义插入的元素，并使用 ViewContainerRef 来获取要插入元素的容器，并将插入元素作为子组件动态加载和显示。

下面是一个示例代码：

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items">
        {{ item }}
        <ng-template #insertedElement></ng-template>
      </li>
    </ul>
  `,
})
export class ListComponent implements OnInit {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  @ViewChild('insertedElement', { read: ViewContainerRef }) insertedElement: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
    // 在每个列表项之间插入一个自定义组件
    for (let i = 0; i < this.items.length - 1; i++) {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);
      const componentRef = this.insertedElement.createComponent(componentFactory);
    }
  }
}

在上面的示例中，我们定义了一个带有列表项的组件，并在列表项之间动态插入了一个名为 CustomComponent 的自定义组件。我们使用了 ng-template 来定义要插入的元素，并使用 ViewContainerRef 来获取要插入元素的容器。在 ngOnInit 生命周期钩子中，我们使用 ComponentFactoryResolver 来解析自定义组件并动态地创建和显示它们。

当 Angular 5 插入 CustomComponent 作为子组件时，这些插入元素的类名将会包含 ‘ng-star-inserted’。我们可以使用这个类名进行样式选择和调整，以满足特定的需求。

li.ng-star-inserted {
  background-color: yellow;
}

在上述示例中，我们使用了 ‘ng-star-inserted’ 类名选择器来为被插入元素设置了一个黄色的背景颜色。

总结

在 Angular 5 中，’ng-star-inserted’ 是用于表示被注入元素的类名之一。它的作用是为被注入的元素提供特定的样式选择器，以便我们可以对其进行样式调整和布局处理。通过使用这个类名，我们可以更好地控制动态插入元素的外观和行为。希望本文可以帮助你更好地理解和应用 ‘ng-star-inserted’ 类。