Angular 4 中的可配置组件（动态类加载器）

Posted 2023-02-22

【中文标题】Angular 4 中的可配置组件（动态类加载器）

【英文标题】：Configurable components in Angular 4 (dynamic class loader)

【发布时间】：2018-06-16 00:14:34

【问题描述】：

在我们的应用程序中，我们有一个KeypadComponent，它显示键盘布局， 基于给定的 JSON，例如。 'Q', 'W', 'E', 'R'...等

目前我们定义了大约 100 种键盘布局，但它们的数量可能不受限制（每种语言特定），因此很难将它们全部注册为提供者。

你会为此选择什么架构？

现在我正在考虑这样的事情（每个文件存储一个布局）：

interface LayoutInterface 
    getLayout();


class LayoutEnglish implements LayoutInterface 
    getLayout() 
        return 'Q', 'W', 'E', 'R'...;
    


class LayoutNumeric implements LayoutInterface 
    getLayout() 
        return '1', '2', '3', ...;
    


class LayoutComponent 
   @Input
   type: 'english';

   getLayout(type)  
     // what about dynamic import here?
     return new Layout+type;
   



keypad.component.html

<app-keypad type="english"></app-keypad>

【参考方案1】：

我不知道你如何加载你的组件。我认为动态路由参数最适合。 如果您想根据不同的键盘布局更改模板 然后您可以为每个子组件使用nested router outelet。 如果您不想更改模板 然后为您的特定布局创建一个返回特定数据的服务