Question

在Angular中，我可以做些什么来避免代码重复并在以下情况下让我的代码更干？

我有一些常用功能的定义：

enum RepeatEnum {
    one, two
}

class BaseClass {

    public repeatProperty: RepeatEnum = RepeatEnum.one;

    repeatMethod() {
        return this.repeatProperty === RepeatEnum.two;
   }
}

我有许多使用此功能的x-component.ts个文件：

export XComponent extends BaseClass implements OnInit {
    constructor() {
        super();
        this.repeatProperty = RepeatEnum.two
    }
}

我在以下格式的相应x-component.html文件中重复了代码：

<div class="repeatHtml" *ngIf="repeatMethod()">
   It's Two!
</div>

如何避免在新组件中复制此html，我该怎么做？

有没有办法将这个html块移动到一个单独的“模板”中，同时维护底层组件逻辑？

Answer 1

我的建议是从常用的html中提取组件。

我的意思是说如果有html部分在你的角度应用程序中不断重复，我建议在新组件中提取html并将该组件放在共享模块中。并在每个地方使用该组件。

角度组件背后的想法是，每个组件都添加新的自定义HTML标记，您可以像其他HTML标记div，表格等一样重复使用.html

因此，在创建新组件时，它会成为您可以在需要它的应用程序位置使用的一个标记。

解决代码重复方案

1 个答案: