Я бы предположил, что лучше использовать ajax и загрузить элемент svg с другой страницы.
$('.container').load(href + ' .svg_element');
Где href - расположение страницы с помощью svg. Таким образом, вы можете избежать любых неудобных эффектов, которые могут возникнуть при замене содержимого html. Кроме того, не забудьте развернуть svg после его загрузки:
$('.svg_element').unwrap();
<div *ngFor="let number of [].constructor(myCollection)">
<div>
Hello World
</div>
</div>
Это - хороший и быстрый способ повториться для суммы времен в myCollection.
Поэтому, если бы myCollection равнялся 5, Привет Мир был бы повторен 5 раз.
Согласно Угловой документации:
createEmbeddedView
Инстанцирует встроенного представления и вставляет его в этот контейнер.
abstract createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef
.Param Type Description templateRef TemplateRef the HTML template that defines the view. context C optional. Default is undefined. index number the 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.
, Когда угловой создает шаблон путем вызова createEmbeddedView, он может также передать контекст, который будет использоваться в ng-template
.
Используя контекст дополнительный параметр, можно использовать его в компоненте, извлекая его в шаблоне, как Вы были бы с *ngFor.
app.component.html:
<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
item : {{i}} / {{c}}
<b>
{{f ? "First,": ""}}
{{l? "Last,": ""}}
{{e? "Even." : ""}}
{{o? "Odd." : ""}}
</b>
</p>
for.directive.ts:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
class Context {
constructor(public index: number, public length: number) { }
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return this.index % 2 === 1; }
get first(): boolean { return this.index === 0; }
get last(): boolean { return this.index === this.length - 1; }
}
@Directive({
selector: '[for]'
})
export class ForDirective {
constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
@Input('for') set loop(num: number) {
for (var i = 0; i < num; i++)
this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
}
}