javascript - 使用 ng-content 创建一个 Angular2 组件的 "clone"

Question

我正在使用 Angular 2 创建 3d“卡片翻转”。父“卡片翻转”组件包含嵌套的“卡片翻转前”和“卡片翻转后”组件。

<card-flip card-flip-id="demo-1" class="grid_col-6">
  <card-flip-front class="card">
    <div class="card__inner">
      Card Front
    </div>
  </card-flip-front>
  <card-flip-back class="card">
    <div class="card__inner">
      Card Back
    </div>
  </card-flip-back>
</card-flip>

我想创建一个带有内容投影和数据绑定(bind)的 card-flip-front 组件的“克隆”。 “克隆”将用于动画，“原始”将保留在其隐藏的原始位置。这样，当它返回到原始位置(即使用户滚动或调整窗口大小)时，我就有了“克隆”应该动画到哪里的引用。

我面临的主要挑战是我需要将 ng-content 标签中的内容也投影到“克隆”中。问题在于 Angular 将使用第一个 ng-content 标签进行内容投影，而其他未标记的 ng-content 标签将为空(我知道这是预期的行为)。

有人可能会问，“为什么不直接在 DOM 中创建该元素的静态静态副本？”。我想避免这种情况，以便注入(inject)数据(从而修改元素的尺寸)的嵌套组件和数据绑定(bind)将继续工作。

到目前为止，我的工作是通过 ComponentFactory 创建 CardFlipFront 组件的一个实例作为“克隆”，并简单地插入“原始”CardFlipFront 的 innerHTML。

import { 
  Component,
  ComponentFactory,
  ComponentFactoryResolver,
  ComponentRef,
  ContentChild,
  Inject,
  Input,
  OnInit,
  ViewChild,
  ViewContainerRef 
} from '@angular/core';
import { CardFlipFrontComponent } from './card-flip-front.component';
import { CardFlipBackComponent } from './card-flip-back.component';
import { CardFlipService } from './card-flip.service';

@Component({
  selector: 'card-flip',
  templateUrl: './card-flip.component.html',
  styleUrls: ['./card-flip.component.css'],
  entryComponents: [
    CardFlipFrontComponent
  ]
})
export class CardFlipComponent implements OnInit {
  @Input('card-flip-id') public id: string;
  @ContentChild(CardFlipFrontComponent) private front: CardFlipFrontComponent;
  @ContentChild(CardFlipBackComponent) private back: CardFlipBackComponent;
  @ViewChild('frontCloneContainer', { read: ViewContainerRef }) private frontCloneContainer: ViewContainerRef;
  private frontComponentRef: ComponentFactory<CardFlipFrontComponent>;
  private frontClone: ComponentRef<CardFlipFrontComponent>;

  constructor(
    @Inject(CardFlipService) private _cardFlipService: CardFlipService,
    private _componentFactoryResolver: ComponentFactoryResolver
  ) {
    this.frontComponentRef = this._componentFactoryResolver.resolveComponentFactory(CardFlipFrontComponent);
  }

  ngOnInit() {
    this._cardFlipService.register(this.id);
  }

  ngAfterViewInit() {
    // Create a card-flip-front component instance to serve as a "clone"
    this.frontClone = this.frontCloneContainer.createComponent(this.frontComponentRef);
    // Copy the innerHTML of the "original" into the "clone"
    this.frontClone.instance.el.nativeElement.innerHTML = this.front.el.nativeElement.innerHTML;
  }

  ngOnDestroy() {
    this.frontClone.destroy();
  }
}

<ng-content select="card-flip-front"></ng-content>
<ng-container #frontCloneContainer></ng-container>
<ng-content select="card-flip-back"></ng-content>

import {
  Component,
  ElementRef,
  HostBinding,
  Input,
  OnInit,
  Renderer
} from '@angular/core';

@Component({
  selector: 'card-flip-front',
  templateUrl: './card-flip-front.component.html',
  styleUrls: ['./card-flip-front.component.css']
})
export class CardFlipFrontComponent implements OnInit {
  constructor(private _el: ElementRef, private _renderer: Renderer) { }

  public get el(): ElementRef {
    return this._el;
  }

  public get renderer(): Renderer {
    return this._renderer;
  }

  ngOnInit() { }
}

<ng-content></ng-content>

更新:

好的，所以在阅读了一些类似的挑战和 github issue here 之后，我尝试了以下方法。

<ng-template #frontTemplate>
  <ng-content select="card-flip-front"></ng-content>
</ng-template>

<ng-container *ngIf="isOpen == true" #front1>
  <ng-container *ngTemplateOutlet="frontTemplate"></ng-container>
</ng-container>

<ng-container *ngIf="isOpen == false" #front2>
  <ng-container *ngTemplateOutlet="frontTemplate"></ng-container>
</ng-container>

<ng-content select="card-flip-back"></ng-content>

基本上，我们可以通过将 ng-content 放在模板中并使用两个带有 * 的 ng-container 标签来解决单个投影问题ngIf 语句将仅显示基于类属性 isOpen 的模板的一个实例。

但这并不能解决整个问题，因为在任何给定时间只会呈现一个容器。因此，我无法获得“原始”的当前位置来确定在上述返回动画期间为“克隆”设置动画的位置。

Answer 1

我想你可以有一个中间组件<card-flip-content>里面<card-flip>复制并接收 <ng-content> 的模板的 <card-flip> .

类似于:

@Component(
   selector = 'card-flip',
   template = `
   <card-flip-content #theOne>
      <ng-content />
   </card-flip-content>
   <card-flip-content #theClone>
      <ng-content />
   </card-flip-content>
`)

然后根据需要将数据绑定(bind)到#theOne 和#theClone 并仅对#theClone 进行动画处理。这种方式可以有 @Input 和 @Output，从而让一个组件的 Action 由父级解释以便作用于另一个组件。

那行得通吗？