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 | constructor(some: string='something') {
|
23 | console.log(some);
|
24 | }
|
25 |
|
26 | clicked() {
|
27 | console.log(this.hostprop);
|
28 | }
|
29 |
|
30 | ngOnInit() {
|
31 | const outerScope = this;
|
32 | setInterval(function(){
|
33 | outerScope.someValue++;
|
34 | }, 3000);
|
35 | }
|
36 | }
|
37 |
|
38 | @Component({
|
39 | selector: 'app',
|
40 | template: `<div>
|
41 | <templation [component]="testComponent" [template]="template1" ></templation>
|
42 | <templation [component]="testComponent" [template]="template2" ></templation>
|
43 | </div>`
|
44 | })
|
45 | export class AppComponent {
|
46 | private testComponent = TestComponent;
|
47 | private template1 = `<p (click)="clicked()">the new template1{{someValue}}</p>`;
|
48 | private template2 = `<p (click)="clicked()">the newer template</p>`;
|
49 | }
|