Question

在我的组件中，我有一个通过@ContentChildren收到的组件列表。现在我想在我的视图中渲染这些组件，但我仍然坚持如何这样做。我尝试了ng-container和ng-content，但我没有成功。我在考虑一些事情：

<component-renderer [component]="myComponent"></component-renderer>

但我没有找到任何提供此功能的东西。我整理了一个完整的（尽可能少的）示例来获取图片（也许我之前已经出错了一步？）。在组件中获取对这些组件的引用也很重要，因为它们都将实现我想要使用的特定接口：

MyInterface.ts

import { InjectionToken } from "@angular/core";

export const MyInterfaceToken = new InjectionToken<MyInterface>('MyInterfaceToken');

// This interface will be implemented by the "child" components.
export interface MyInterface {
    doSomething(): void;
}

simple.component.ts

import { Component, OnInit, Input, forwardRef } from '@angular/core';
import { MyInterface, MyInterfaceToken } from '../MyInterface';

@Component({
  selector: 'app-simple',
  template: '<div>{{ value }}</div>',
  providers: [{
    provide: MyInterfaceToken, useExisting: SimpleComponent
  }]
})
export class SimpleComponent implements MyInterface {
  @Input() public value: string;

  doSomething(): void {
    alert(this.value);
  }
}

多container.component.ts

import { Component, OnInit, Self, Inject, Optional, Directive, ContentChildren, AfterContentInit, QueryList } from '@angular/core';
import { MyInterface, MyInterfaceToken } from '../MyInterface';

// Directive to retreive the components, partially taken from:
// https://github.com/angular/angular/issues/8277
@Directive({ selector: '[multi-container-item]' })
export class MultiContainerItemDirective {
  constructor(@Inject(MyInterfaceToken) @Self() @Optional() public component: MyInterface) {}
}

@Component({
  selector: 'app-multi-container',
  templateUrl: './multi-container.component.html'
})
export class MultiContainerComponent implements AfterContentInit {
  @ContentChildren(MultiContainerItemDirective) public items: QueryList<MultiContainerItemDirective>;

  public ngAfterContentInit() {
    console.log(this.items); // Inspect in console => got both items.
    this.items.first.component.doSomething(); // works.
  }

  public getComponents() {
    return this.items.map(x => x.component);
  }
}

用法示例

<app-multi-container>
  <app-simple [value]="'Test1'" multi-container-item></app-simple>
  <app-simple [value]="'Test2'" multi-container-item></app-simple>
</app-multi-container>

简短问题：我将多少容器的html放入项目中？类似的东西：

<div *ngFor="let component of getComponents()">
  <component-renderer [component]="component"></component-renderer>
</div>

Answer 1

您只需在MultiContainerComponent组件中使用<div><ng-content select="[multi-container-item]"></ng-content></div>：

    using System;
{
  class Program;
  {
        int a = 0;
        int b = 0;
        while ( a==6; b==6)
        {
          a = rollDice();
          b = rollDice();
          Console.WriteLine("{0} {1}",a,b);
        }
   }
}

Angular：从变量渲染组件

1 个答案: