angular - Angular中具有相同结构的几个页面

Question

我是 Angular 的新手，我正在努力使用通用模块为多个页面创建相同的行为。

情况是这样的:我正在创建一个 CRUD SPA有几个“页面”(使用路由)。事实证明，这些页面中有几个共享相同的结构和行为，并且仅(视觉上)不同于项目在列表中呈现的方式及其选择时的详细信息。像 Asana 的几页一样思考，其中页面之间的唯一区别是列表和详细信息的渲染方式。

我想为这些页面中的每一个创建一个模块，但复制并粘贴所有代码只是为了更改一小部分文件似乎很蹩脚(更新也将是一场噩梦)。

我试图实现的解决方案是创建一个主 CRUD 模块，其中包含一个 Component/html/css，我可以在其中以某种方式参数化每个页面要使用的渲染器。或具有尽可能少的复制粘贴的任何其他解决方案。

感谢您的帮助。

Answer 1

我阅读了有关该工具和动态创建组件等其他内容的信息，但都不是我想要的(特别是考虑到学习曲线)。所以，我花了一些时间，但我自己找到了一个(非常疯狂的)解决方案。

首先，我创建了一个基本模块。在其中，我创建了一个 PageComponent这调用了我需要的页面的两个部分:一个用于列表，另一个用于详细信息(如 Asana)。 page.component.html模板如下所示:

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col">
        <app-list></app-list>
    </div>
    <div class="mdl-cell mdl-cell--4-col">
        <app-details></app-details>
    </div>
</div>`

在这个基础模块中，我为我需要的每个组件创建了一个抽象基类(AbstractListComponent 和 AbstractDetailsComponent)。我在依赖注入(inject)和使用构造函数中的访问字自动创建变量方面遇到了一些问题，所以我的解决方案如下:

export abstract class AbstractDetailsComponent {
    protected service: BaseService;

    protected constructor(service: BaseService) {
        this.service = service;
    }
}

请注意，我没有使用 @Component装饰器，因为它将被忽略(也在 PageComponent 中)。另一件事是一些 Base*创建类和接口(interface)以确保一致性(如 BaseService )。

如您所见，PageComponent 时没有人会回答请求 <app-list>和 <app-details> .疯狂的部分从这里开始。

我为每个页面创建了一个模块，并在其中填充了空白的组件。此外，页面的主要组件扩展了 PageComponent .例如，在我的应用程序中，我有一个技能页面，它指向以下 SkillsComponent :

@Component({
    selector: 'skills-page', // doesn't really matter, this will be called by the router
    templateUrl: '../base-module/page.component.html',
    styleUrls: [ '../base-module/page.component.css', './skills.component.css' ]
})
export class SkillsComponent extends PageComponent { }

请注意 templateUrl其中一种样式指向基本模块内的文件。这是我发现在所有页面之间共享相同页面结构的方式。

现在，差距。我需要的两个组件都很相似。基本上，我为每个扩展基类并注入(inject)正确的服务。这是 SkillDetailsComponent :

@Component({
    selector: 'app-details', // <-- the name required by the PageComponent template
    templateUrl: './skill-details.component.html',
    styleUrls: [ '../base-module/details.component.css', './skills-details.component.css' ]
})
export class SkillsDetailsComponent extends DetailsComponent {
    public constructor(service: SkillsService) {
        super(service);
    }
}

selector正是 page.component.html 所要求的那个.所有页面的所有列表和详细信息组件共享相同的方法。这使得相同的模板在所有页面中都有用，因为选择器是相同的。

另一件事是构造函数。我必须这样做才能注入(inject)正确的服务。

最终的文件结构如下所示:

app/
    ├ base-module/
    │    ├ base.component.css
    │    ├ base.component.html
    │    ├ base.component.ts
    │    ├ base.module.ts
    │    ├ details.component.css
    │    ├ details.component.ts
    │    ├ list.component.css
    │    ├ list.component.html
    │    └ list.component.ts
    └ skills-module/
        ├ skills-details.component.css
        ├ skills-details.component.ts
        ├ skills-list.component.css
        ├ skills-list.component.ts
        ├ skills.component.css
        ├ skills.component.html
        ├ skills.component.ts
        └ skills.module.ts

我不知道这是否是最佳解决方案，但它正在按我需要的方式运行。很难解释我所做的所有步骤(通常这是一个过于复杂的解决方案的标志)，但我希望它是可以理解的。