我正在使用 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 标签来解决单个投影问题ngIfisOpen 的模板的一个实例。
但这并不能解决整个问题，因为在任何给定时间只会呈现一个容器。因此，我无法获得“原始”的当前位置来确定在上述返回动画期间为“克隆”设置动画的位置。
最佳答案
我想你可以有一个中间组件<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 由父级解释以便作用于另一个组件。
那行得通吗？
关于javascript - 使用 ng-content 创建一个 Angular2 组件的 "clone"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43347173/