我正在尝试创建一个内部具有动态模板字符串的组件,该字符串可以访问模板上的局部变量。我尝试过的每种方法都以“动态模板字符串”结束$compile
(请原谅我是角度 1 术语)。
这是下面组件的代码。在您看到评论的地方,我想插入一个可以item
在ngFor
.
@Component({
selector: 'ion-alpha-scroll',
template: `
<ion-scroll [ngStyle]="calculateScrollHeight()" scrollX="false" scrollY="true">
<ion-list class="ion-alpha-list-outer">
<div *ngFor="let items of sortedItems | mapToIterable;">
<ion-item-divider id="scroll-letter-{{items.key}}">{{items.key}}</ion-item-divider>
<ion-item *ngFor="let item of items.value">
<!-- how can I pass a dynamic template here that can reference item ? -->
</ion-item>
</div>
</ion-list>
</ion-scroll>
<ul class="ion-alpha-sidebar" [ngStyle]="calculateDimensionsForSidebar()">
<li (click)="alphaScrollGoToList(letter)" *ngFor="let letter of alphabet">
<div class="letter">{{letter}}</div>
</li>
</ul>
`,
pipes: [MapToIterable]
})
export class IonAlphaScroll {
@Input() listData: any;
@Input() key: string;
@Input() template: string;
....
}
理想情况下,我希望ion-alpha-scroll
在item
. ngFor
我尝试ng-content
在必要ngFor
的组件中使用但没有运气 -
<ion-alpha-scroll *ngIf="breeds" [listData]="breeds" key="$t">
{{item.$t}}
</ion-alpha-scroll>
我试过的一件事是这样的 -
<ion-alpha-scroll *ngIf="breeds" [listData]="breeds" key="$t" [template]="alphaScrollTemplate">
</ion-alpha-scroll>
这alphaScrollTemplate
只是一个包含{{item.$t}}
. 然后我尝试在评论提出问题的组件中引用它,但它不起作用 -
...
<ion-item *ngFor="let item of items.value">
{{template}}
<!-- this just outputs {{item.$t}} literally -->
</ion-item>
...
我真的很好奇这是否可以用 angular 2 来实现。我刚刚发现这个问题与我的非常相似。任何帮助或建议将不胜感激,谢谢。