UI 架构发布新的 Angular 应用程序答案

【问题标题】：UI architecture issue new angular appUI 架构发布新的 Angular 应用程序
【发布时间】：2018-07-04 01:39:38
【问题描述】：

目前在 angular 5 中使用 ngrx 启动一个新项目，并试图找出一些架构方面的东西。

应用程序应该从一个类似仪表板的页面开始。在页面顶部，您将有一个带有按钮的栏，您可以切换一些小部件（组件）。

我现在遇到的问题是，我不知道哪种方式是在同一页面上显示这些多个组件的最佳方式，请记住这些组件中的每一个都存在于不同的模块中。

因此，简而言之，仪表板页面需要显示多个组件，这些组件可以通过切换顶部的菜单按钮来隐藏或显示，并且每个组件都位于不同的模块中。实际上，每个组件都会有一些动作，它们会将您路由到该模块中的页面。

例如，在我的仪表板中，我将有一个小部件项目，其中包含一个包含我所有项目的网格，通过双击一行，我将被路由到项目模块中的项目页面。我希望我能够说清楚。提前感谢您帮助我进行搜索。

谢谢。

【问题讨论】：

SO 是一个问答网站。你并不是真的在问一个可以回答的问题。请参考How to Ask
问题可能更适合 SE softwareengineering.stackexchange.com 中的架构问题
@progmatico 在引用其他网站时，指出cross-posting is frowned upon 通常会有所帮助
谢谢@gnat，你的链接对我也很有帮助。

标签： javascript angular architecture

【解决方案1】：

使用 Angular 会很容易。任何组件都可以使用它的selector 插入应用程序中的任何其他位置，该selector 出现在该组件的.ts 文件的顶部。它可以导入为简单的<html>，即 <my-component> 附加 *ngIf 指令使其仅在布尔值为真时出现。 <my-component *ngIf="myBoolean"> 然后，当单击仪表板按钮时，将 boolean 设置为 true。要关闭它，请将其设置为 false。因此，您的 app.html 文件可能如下所示：

<app-nav-bar (toggleOn)="setComponent($event)"></app-nav-bar>

这将是您的导航栏组件。可以有一个名为 toggle on 的发射器，在点击时会发射，您可以在 app 中的 setComponent 函数中处理它。在那个函数中：

toggleOn(componentName: string) {
  if(componentName === 'componentOne') {
    showComponentOne ? showComponentOne = false: showComponentOne = true;
  }
  //...for your components.
}

然后在 app.html 中的 html 中放置您的组件并在它们上放置一个 *ngIf 并绑定到它们的布尔值。

在导航栏组件中，您的事件发射器将像这样工作：首先是一个在组件上切换的按钮：

<button (click)="toggle('component1')">Component 1</button>

然后在.ts文件中在toggle函数中处理这个组件：

toggleOn = new EventEmitter<string>();
toggle(componentName: string) {
  toggleOn.emit(componentName);
}

使用此策略应该可以解决您的问题，但是有很多方法。 Angular 文档中对许多以 Angular 进行数据通信的技术进行了很好的阅读。 https://angular.io/guide/component-interaction 专注阅读，你会成为更好的开发者！

【讨论】：