UI架构发布新的角度应用

Question

Currently starting up a new project in angular 5 with ngrx and trying to figure out some architectural things. 目前，正在使用ngrx在angular 5中启动一个新项目，并尝试找出一些体系结构方面的内容。

The app should start with a page like some sort of dashboard. 该应用程序应以类似于某种仪表板的页面开头。 On top of the page you will have a bar with buttons which you can toggle some widgets(components). 在页面顶部，您将有一个带有按钮的栏，您可以在其中切换一些小部件（组件）。

The issue i am having now is i don't know which would be the best way to show these multiple components on the same page with that in mind that each of these components are living in a different module. 我现在遇到的问题是，我不知道哪种方法是在同一页面上显示这些多个组件的最佳方法，请记住这些组件中的每个组件都位于不同的模块中。

So in a nutshell the dashboardpage needs to show multiple components which can be hidden or shown via toggling the menu buttons on top, and each component lives in a different module. 简而言之，仪表板页面需要显示多个组件，这些组件可以通过切换顶部的菜单按钮来隐藏或显示，并且每个组件都位于不同的模块中。 Actually each component will have some actions which will route you to a page in that module. 实际上，每个组件都会有一些操作，这些操作会将您路由到该模块中的页面。

For example in my dashboard i will have a widget projects which contains a grid with all my projects and by double clicking a row i will get routed to the project page that lives in the projects module. 例如，在我的仪表板中，我将有一个小部件项目，其中包含一个包含我所有项目的网格，通过双击一行，我将被路由到位于项目模块中的项目页面。 I hope i was able to make myself clear. 我希望我能说清楚。 Thanks in advance for helping me in my search. 在此先感谢您为我的搜索提供帮助。

Thanks. 谢谢。

Answer 1

This will be easy with angular. 有了角度，这将很容易。 Any component can be inserted anywhere else in the application using it's selector which appears at the top of the .ts file for the component. 任何组件都可以使用其selector插入应用程序中的任何其他位置，该selector显示在该组件的.ts文件顶部。 It can be imported as simple <html> , ie <my-component> attach the *ngIf directive to have it only appear when a boolean is true. 可以将其导入为简单的<html> ，即<my-component>附加* ngIf指令，使其仅在布尔值为true时才出现。 <my-component *ngIf="myBoolean"> then when a dashboard button is clicked set that boolean to true. <my-component *ngIf="myBoolean">然后单击仪表板按钮时，将该boolean设置为true。 to close it, set it to false. 若要将其关闭，请将其设置为false。 So your app.html file could look like this: 因此，您的app.html文件可能如下所示：

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

which is your navbar component will be. 这就是您的导航栏组件。 there can be an emitter called toggle on that emits on click there and you can handle it in a setComponent function in app. 可以有一个名为toggle on的发射器，单击该按钮后便会发射，您可以在应用程序的setComponent函数中进行处理。 In that function: 在该功能中：

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

then in the html in app.html place your components and put an *ngIf on them tied to their boolean. 然后在app.html中的html中放置您的组件，并在它们的布尔值上附加一个* ngIf。

In the nav-bar component your event emmiter will work like this: first here's a button which toggles on the component: 在导航栏组件中，事件发射器将按以下方式工作：首先，这是一个在组件上切换的按钮：

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

then in the .ts file handle this component in the toggle function: 然后在.ts文件中，通过切换功能处理此组件：

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

Using this strategy should solve your problem but there are many approaches. 使用此策略应该可以解决您的问题，但是有很多方法。 A good read on the many techniques to communicate data in angular comes from the angular docs. 有关通过角度交流数据的许多技术的很好的阅读来自角度文档。 https://angular.io/guide/component-interaction Read it with focus and you'll be a much better developer! https://angular.io/guide/component-interaction仔细阅读它，您将成为一个更好的开发者！

UI架构发布新的角度应用

问题描述

1 个解决方案

解决方案1
0 2018-01-24 21:57:51

UI架构发布新的角度应用

问题描述

1 个解决方案

解决方案1 0 2018-01-24 21:57:51

解决方案1
0 2018-01-24 21:57:51