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