爲NativeScript動態生成Angular2組件

我有要求從服務器下載內容並將內容集成到我的Nativescript/Angular2應用程序中。內容提供者希望能夠格式化文本。我已經與HtmlView和WebView一起工作，並且他們有一些限制。爲NativeScript動態生成Angular2組件

web視圖不能動態生長在以適應內容的大小例如一個StackLayout。它創建了一個滾動區域，它不符合我們想提供的用戶體驗。
HtmlView非常支持HTML/CSS格式，尤其是在Android上。例如 <font color='green'>不起作用！

所以我開始研究動態生成Angular2組件。即從服務器下載模板。我一直在關注SO Answer的討論，並取得了一些成功。用戶界面是從運行時提供的簡單字符串呈現的，是啊！示例項目可在github上找到，dynamic-demo。

要做到這一點，我已經更新了NG模板項目是這樣的：

@Component({ 
    selector: "my-app", 
    templateUrl: "app.component.html", 
}) 
export class AppComponent implements AfterViewInit { 
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; 

    constructor(
     @Inject('DynamicComponent') private _dynamicComponent: DynamicComponent 
    ){}; 

    ngAfterViewInit() { 
     this._dynamicComponent.addComponent(
      this.container, 
      ` <Label text="Hello, World!" class="h1 text-center"> </Label> 
       <Button text="Tap Again" (tap)="onTap()" class="btn btn-primary btn-active"> </Button> 
      ` 
     ) 
    } 

    public counter: number = 16; 
     public get message(): string { 
     if (this.counter > 0) { 
      return this.counter + " taps left"; 
     } else { 
      return "Hoorraaay! \nYou are ready to start building!"; 
     } 
    } 

    public onTap() { 
     this.counter--; 
    } 
}

增強的心臟是這個DynamicComponent類我說：

import { Injectable, Compiler, Component, NgModule, ViewContainerRef} from '@angular/core' 

@Injectable() 
export class DynamicComponent { 
    constructor(private compiler: Compiler) {} 

    public addComponent(container: ViewContainerRef, template: string) { 
     @Component({template: template}) 
     class TemplateComponent { 

      onTap(args) { 
       console.log('onTap()'); 
      } 
     } 

     @NgModule({declarations: [TemplateComponent]}) 
     class TemplateModule {} 

     const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule); 
     const factory = mod.componentFactories.filter((comp) => 
     comp.componentType === TemplateComponent 
     ); 
     const component = container.createComponent(factory[0]); 
    } 
}

我想得到我的方法的一般反饋。

這工作？
我是否需要擔心原始StackOverflow討論中較大的問題？
如何設置它，以便我可以提供該點擊動作功能作爲DynamicClass的輸入，而不是像我在012xx與onTap()一樣將它們嵌入到課程中？

來源

2016-12-30 ahalls

這裏是我的問題3解決方案：

ngAfterViewInit() { 
    var component = <any> 
     this._dynamicComponent.addComponent(
      this.container, ` 
      <Label text="Hello, World!" class="h1 text-center"> </Label> 
      <Button text="Tap Again" (tap)="onTap()" class="btn btn-primary btn-active"> </Button> 
     `); 

    component.prototype.onTap =() => { 
     this.counter++; 
    } 
}

我更新addComponent返回動態創建的TemplateComponent類，然後我添加函數對象，我會在JS。有點醜但它的作品。

來源

2016-12-30 04:36:15 ahalls

爲NativeScript動態生成Angular2組件

回答

相關問題