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>

如果您熟悉角形材料，则所需的结果与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不会渲染它。

有效的堆叠闪电战：https://stackblitz.com/edit/angular-2svnpt

Answer 2

此问题背后的想法是创建一个包装多个子组件的组件，然后根据其数量，包装器将成为一个列表。

问题：为什么我要实施这样的事情？

答案：假设您想创建一个步进器。

        DropdownButton<String>(
                      items:list.map((Map val){
                        return DropdownMenuItem<String>(
                          value: val["companyCode"],
                          child: new Text(val["companyName"]),
                        );
                      }).toList(),
                      ...

我要解决的问题如下

StepComponent

step.htm

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

step-component.ts

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

StepperComponent

stepper.html

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

constructor() {
}

ngOnInit() {
}

stepper-component.ts

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

还有 le estjoué。

有关更多详细信息和理解，请参阅以下链接：

创建组件支架

2 个答案: