Question

我正在使用最新的Angular构建中型应用程序。

从根本上讲，路由是“屏幕”，并且每个路径（但并非总是）都由JSON组件数组填充。因此，例如，简化的文本组件可能是：

{
   selector: "app-text", 
   data: "Hello Stranger"
}

此刻，我有一个Container组件，它接受JSON输入并执行以下操作：

switch (config.selector) {
    case ComponentTypes.TEXT:
         const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TextContentComponent);
         const componentReference = viewContainerRef.createComponent(componentFactory);
         const component = componentReference.instance;
         component.config = config;
         component.detectChanges();
         return componentReference;
    break;
}

这足够有效，但似乎有点麻烦。主要原因是因为我确实有两种类型的组件。

Container可以输入文字
Screen可以使用文本和容器（可能包含文本）。

似乎Screen extends Container，但我并不特别认为继承是正确的选择。在Angular社区中似乎是不利的。

这就是我要解决的问题。

我不知道什么是特定的内容，因为它取决于JSON，但最终可能会出现这样的屏幕。

| Screen
-|Text
-|Container
--| Text
--| Image
--| Container
---| Button
---| Button

在这种情况下，Screen extends Container天真。

是否有更好的方法可以解决此问题？

Angular Dynamic Components继承的替代策略？

0 个答案: