1 | import {
|
2 | Directive,
|
3 | ElementRef,
|
4 | Input,
|
5 | ViewContainerRef,
|
6 | ComponentRef,
|
7 | Component,
|
8 | Renderer
|
9 | } from '@angular/core';
|
10 |
|
11 |
|
12 | @Component({
|
13 | selector: 'test',
|
14 | template: `<div>
|
15 | <p>test component</p>
|
16 | </div>`
|
17 | })
|
18 | export class TestComponent {
|
19 | private hostprop = 'clicked it';
|
20 | public someValue = 1;
|
21 |
|
22 | clicked() {
|
23 | console.log(this.hostprop);
|
24 | }
|
25 |
|
26 | ngOnInit() {
|
27 | const outerScope = this;
|
28 | setInterval(function(){
|
29 | outerScope.someValue++;
|
30 | console.log(outerScope.someValue);
|
31 | }, 3000);
|
32 | }
|
33 | }
|
34 |
|
35 | @Component({
|
36 | selector: 'app',
|
37 | template: `<div>
|
38 | <templation [component]="testComponent" [template]="template1" ></templation>
|
39 | <templation [component]="testComponent" [template]="template2" ></templation>
|
40 | </div>`
|
41 | })
|
42 | export class AppComponent {
|
43 | private testComponent = TestComponent;
|
44 | private template1 = `<p (click)="clicked()">the new template1{{someValue}}</p>`;
|
45 | private template2 = `<p (click)="clicked()">the newer template</p>`;
|
46 | }
|