我需要从服务器下载内容并将内容集成到我的Nativescript / Angular2应用程序中 . 内容提供商希望能够格式化文本 . 我使用过HtmlView和WebView,但它们有一些局限性 .
-
WebView无法动态增长以适应StackLayout中内容的大小 . 它创建了一个滚动区域,不符合我们想要提供的用户体验 .
-
HtmlView对HTML / CSS格式的支持非常有限,特别是在Android上 .
<font color='green'>
例如不起作用!
所以我一直在关注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]);
}
}
我想得到关于我的方法的一般反馈 .
-
这会有用吗?
-
我是否需要担心原始StackOverflow讨论中较大答案的问题?
-
如何设置它以便我可以提供tap动作函数作为DynamicClass的输入而不是像我用
onTap()
那样将它们嵌入到类中?
1 回答
这是我的问题3的解决方案:
我更新
addComponent
以返回动态创建的TemplateComponent类,然后我像在JS中一样向对象添加一个函数 . 有点难看,但它的工作原理 .