Angular2, как передать переменную в шаблон, который клонируется
В Angular2 у меня есть шаблон кода, который я клонирую всякий раз, когда пользователь нажимает кнопку, как ответили здесь. Как динамически добавить клонированный узел в angular2 (эквивалент cloneNode)
Я пытаюсь передать ему переменную, но она не работает. В чем дело?
import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<template #clone let-session>
<div [id]="session">eps {{session}} ya</div>
</template>
<div #container></div>
<div>
<button (click)="create()">Hello</button>
</div>
`,
})
export class App {
name:string;
@ViewChild('clone') clone:any;
@ViewChild('container', {read:ViewContainerRef}) container:any;
constructor() {
this.name = 'Angular2'
}
create(){
let session = 'testing';
this.container.createEmbeddedView(this.clone, {context: {$implicit: session}});
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
И плункер https://plnkr.co/edit/pWeQfTLroOjKoyKnaZvL?p=preview
2 ответа
Решение
create_new_session(s : string) {
this.container.createEmbeddedView(this.clone, {context: {$implicit: session}});
}
<template #clone let-session>
<section [id]="session"
[bookmark_draggable_target]="{event_type:'moving_sessions',zone:'title_template'}"
(drop_here)="onDrop($event)">
</section>
</template>
https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html