為NativeScript動態生成Angular2組件

Question

我需要從服務器下載內容並將該內容集成到我的Nativescript / Angular2應用程序中。 內容提供者希望能夠格式化文本。 我曾經使用過HtmlView和WebView，但它們有一些限制。

1. 例如，WebView不能動態增長以適應StackLayout中內容的大小。 並且它創建了一個滾動區域，該區域不適合我們想要提供的用戶體驗。

2. HtmlView對HTML / CSS格式的支持非常有限，尤其是在Android上。 <font color='green'>不起作用！

因此，我開始研究動態生成Angular2組件。 那就是從服務器下載模板。 我一直在關注SO Answer中的討論，並在此方面取得了一些成功。 UI是從運行時提供的簡單字符串渲染的，是的！ 該示例項目可以在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]);
    }
}

我想獲得有關我的方法的一般反饋。

1. 這樣行嗎？
2. 我是否需要擔心原始StackOverflow討論中的較大答案的問題？
3. 如何設置它，以便可以將tap操作功能作為DynamicClass的輸入提供，而不是像對onTap()那樣將它們嵌入到類中？

Answer 1

這是我的問題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中一樣向對象添加一個函數。 有點丑陋，但可以。