Angular 2 How to implement multiple layout components

Hello dear internet! First of all, this is great, thanks for this great frontend technology.

Currently, it’s difficult for us to work with the routes and layout structure of the application. How can we implement several components of HomeLayoutComponents and depending on the state (for example, isLoggedIn) override which one to use by default!?

What we want to achieve is experience with one page , where the user can view the application (StartComponent), read some information and after entering the system receives the application without leaving the root URL (route: '') .

When logging out, the user will again see the default LoginComponent.

enter image description here

applications

  • Directs the user to StartHome (route: ``) or to the dashboard (route: '')

HomeLayoutComponent

  • HomeLayoutComponent contains or similar functionality, allowing you to have a completely custom layout instead of hiding parts of the html.
  • Ohter components can transfer HomeLayout content without using ChildRoutes.

Despite the route, our biggest problem is that ours or the application will have a common different html layout depending on the authentication state. We are aware of some other approaches, and they do not work. Does anyone know how to do this with the current version or ahead of time?

[3]: Some say that gitter uses the dynamic setRoot method, but I don’t know how, for example, an example was not found that will help to implement the requirement described in this question.

+5
source share
1 answer

@ 4F2E4A2E CanActivate + RouterModule.forChild () the solution you were looking for?

If so, it was a detailed source in a script discussing forChild hosted on this thread .

0
source

Source: https://habr.com/ru/post/1258704/


All Articles