如何使用 angular 中的选择器将一个组件添加到另一个组件中？

Question

在angular中，有一项功能可用，我们可以创建一次组件，然后在项目的任何地方重复使用它。

我正在从事一个复杂的项目，其中有很多可用的组件。现在我想让所有这些组件更加可重用。

因此，我想通过以下方式重用我的布局：

<car-layout [color]="'red'">
  <steering [color]="'black'"></steering >
  <rear-view-mirror [size]= "'12'"></rear-view-mirror>
</car-layout>

但我不知道它是如何工作的！如果有人知道，请指导我...

Answer 1

在组件中，您可以使用内容投影通过 <ng-content></ng-content> 标记定义占位符。

在您的示例中，您可以在 car-layout 组件的 HTML 中使用 <ng-content></ng-content> 标签。然后它将被您嵌套在 car-layout 组件中的任意内容替换。例如

<car-layout>
  <p>Any HTML content</p>
</car-layout>

会将 <p>Any HTML content</p> 投射到您的 car-layout 组件中并替换 <ng-content></ng-content> 标签。除了预定义段落p，您还可以将自己的组件投影到car-layout组件中：

<car-layout>
  <steering [color]="'black'"></steering >
  <rear-view-mirror [size]= "'12'"></rear-view-mirror>
</car-layout>

如果一个选择器无法投射您的内容，您还可以使用 Targeted Projection 定义多个插槽。

有关更详细的信息，请查看例如here or here.

Answer 2

如果你想在组件中插入 HTML 元素或其他组件，那么你可以使用内容投影的概念来实现。在 Angular 中，您使用 < ng-content > > /ng-content > 实现内容投影。您可以通过正确使用内容投影来制作可重用的组件和可扩展的应用程序。

让我们创建一个组件，即 GreetComponent.ts

 import { Component } from '@angular/core';
 @Component({
     selector: 'greet',
     template: `<div class="container">
                 <ng-content> </ng-content>
             </div>`
 })
 export class GreetComponent{ }

AppComponent.ts

      import { Component } from '@angular/core';
 @Component({
     selector: 'App',
     template: `<greet>
                    <h1>Hello World!!!!</h1> 
               </greet>`
 })
 export class AppComponent{ }

内容投影对于在您的组件中插入阴影非常有用 DOM。要在组件中插入HTML个元素或其他组件，需要使用内容投影。

如何使用 angular 中的选择器将一个组件添加到另一个组件中？

How can I add one component into another component using selector in angular?

parent-child

selector

angular