Я пытаюсь создать компонент, который внутри него содержит динамическую строку шаблона, которая может обращаться к локальным переменным в шаблоне. Каждый подход, который я пробовал, заканчивается тем, что «динамическая строка шаблона» не является $compile
'd (угловая 1 терминология, пожалуйста, извините меня).Как создать компонент с динамическим шаблоном? (Компонент transclude с встроенным шаблоном)
Ниже представлен код для компонента ниже. Где вы видите комментарий, я хотел бы вставить строку шаблона, которая может ссылаться на 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>
...
Я очень интересно, если это возможно даже при угловом 2 еще. Я только что нашел this question which is very similar to mine. Любая помощь или предложения будут очень благодарны, спасибо.
См http://stackoverflow.com/questions/36008476/how-to-realize-website-with-hundreds-of-pages-in-angular2 –
@ GünterZöchbauer Спасибо. Я понял способ, используя этот подход здесь: http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ Я добавлю ответ на свой вопрос с решением, когда я законченный. – Ross