I'm making an application with login and signup pages. They both share quite a lot of things, that I want to put in a component called auth-component.

The component hierarchy is:

app-component
    auth-component
        login-component
        signup-component
    other-component

But since mypage.com/auth alone is not used for anything, I'd rather cut that part out, and have URL:s mypage.com/login and mypage.com/signup, without the 'auth' in the middle.

Currently, the ways to do this that I can come up with are:

1. Hard-code 'auth' into both login-component and signup-component, which goes against DRY (especially when there are more than two components)

2. Using mypage.com/:keyword that loads the auth-component, which in turn contains

   <app-login *ngIf="currentRoute==='login'"></app-login>

   <app-signup *ngIf="currentRoute==='signup'"></app-signup>

which I think is a really ugly hack, since both login and signup are existing pages, and not some key-values.

I feel like this should be a fairly common problem, so there should be a standard way of doing it? Or am I thinking about it entirely wrong, and the whole page should be structured entirely differently?

I found one similar question from long ago, with no answer, so I hope it's okay to post this.

CodePudding user response：

auth-component doesn't need to be a route. All you need to do is following:

1. let /login route to LoginComponent and /signup route to SignupComponent
2. Create the AuthComponent that yields all the common frame stuff. At the place where both components differ, place the <ng-content></ng-content> "placeholder".
3. Within the LoginComponent and Signupcomponent you use AuthComponent while specifying the content

login-component:

<auth-component>
  ...login-stuff
</auth-component>

login-stuff goes where ng-content was defined.