创建组件 Holder

Question

如何创建一个充当列表的组件，但列表的长度和内容取决于组件持有者中指定的子组件。

示例：

<parent-component>
  <child-component> content </child-component>
  <child-component> content </child-component>
  <child-component> content </child-component>
  <child-component> content </child-component>
  <child-component> content </child-component>
</parent-component>

如果您熟悉 angular 材质，所需的结果与 MatStepperComponent 相同。

注意：每个子组件中的内容都有一个完全不同的模型。所以基本上，注入组件而不是数据模型

Answer 1

您可以查看在 ngFor 中获得的数据。

这是一个简单的逻辑。对于此示例，这是我使用的数据类型：

[{
        "name": "John",
        "age": 30,
        "role": "Actor"
    },
    {
        "name": "Elys",
        "age": 22,
        "role": "The main one"
    },
  {
    "name": "Jhon",
    "age": 44,
    "role": "a random role"
  }
]

检索数据的（假）服务：

    import { Injectable} from '@angular/core';

    @Injectable()
    export class MainService{

    private data = [{
            "name": "John",
            "age": 30,
            "role": "Actor"
        },
        {
            "name": "Elys",
            "age": 22,
            "role": "The main one"
        },
      {
        "name": "Jhon",
        "age": 44,
        "role": "a random role"
      }
    ]
      constructor(){}
      public getData(){
        return this.data;
      }
    }

The main component: 

import { Component } from '@angular/core';

import { ChildComponent } from './child.component'
import { MainService } from './main.service'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data: any;
  constructor(private service: MainService){
    this.data = this.service.getData();
  }
}
<h2>The list above is created dinamically

  <hr>

  <ng-container *ngFor="let item of data">
    <child-cmp [data]="item"></child-cmp>
    <br>
  </ng-container>

子组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-cmp',
  templateUrl: './child.component.html'
})
export class ChildComponent  {
  @Input() data: any;
}
<div style="display: flex; flex-direction: row">
  <span style="margin-right: 10px"> {{data.name}}</span>
  <span style="margin-right: 10px"> {{data.age}}</span>
  <span style="margin-right: 10px"> {{data.role}}</span>
</div>

注意我使用 ng-container 进行迭代，因为 angular 不渲染它。

工作 stackblitz：https://stackblitz.com/edit/angular-2svnpt

Answer 2

这个问题背后的想法是创建一个包装多个子组件的组件，并且根据它们的数量，包装器变成一个列表。

问题：我为什么要实现这样的东西？

答案：想象一下你想创建一个类似于步进器的东西。

<stepper>
  <step> <component-a> </step>
  <step> <component-b> </step>
  <step> <component-c> </step>
</stepper>

我得到的解决方案如下

步进组件

step.htm

<ng-template>
  <ng-content></ng-content>
</ng-template>

步骤-component.ts

@ViewChild(TemplateRef)
public stepContainerRef: TemplateRef<any>;

constructor() {
}

ngOnInit() {
}

步进组件

stepper.html

<div *ngFor="let step of steps; let elementIndex = index">
  <ng-container [ngTemplateOutlet]="step.stepContainerRef"></ng-container>
</div>

步进器-component.ts

 @ContentChildren(StepComponent) steps: QueryList<StepComponent> = new QueryList<StepComponent>();

和le tour est joué。

更多细节和理解请参考以下链接：

创建组件 Holder

Create a component Holder

angularjs

angularjs-directive

angular