Angular 2- what is the best way to set multiple components in one path without losing data using TypeScript
<pre><code>export const routes: Routes  = [
{path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login',component: LoginComponent },

{path: 'main', component: MainComponent ,},

{ path: 'Dashboard',component: DashboardComponent,
    children: [
        {
            path: ':id',
            children: [
                { path: '',redirectTo: 'Registration', pathMatch: 'full'},
                {
                    path: 'Registration',
                    component: RegistrationComponent,
                },
                {
                    path: 'Contact',
                    component: ContactComponent
                },
            ]
        }
    ]
},];
</code></pre>

<p>How to maintain input fields data in contact and registration component.
With multiple child views the data is lost on moving one child component to another child.</p>

<p><strong>DashBoard Component 1:</strong></p>

<pre><code>@Component({
selector: 'Registration',
template: `&lt;input type="text" required&gt;`,})
 export class RegistrationComponent{
constructor(public router: Router) {}}
</code></pre>

<p><strong>DashBoard Component 2:</strong></p>

<pre><code>@Component({
selector: 'Contact',
template: `&lt;input type="text" required&gt;`,})
 export class ContactComponent{
constructor(public router: Router) {}}
</code></pre>

<pre class="lang-html prettyprint-override"><code> &lt;div&gt;
   &lt;a class="Registratin"  [routerLink]="[':/registaration']" routerLinkActive="active"&gt;
                 &lt;/a&gt;
   &lt;a class="Contact"  [routerLink]="[':/contact']"&gt;
                 &lt;/a&gt;
   &lt;/div&gt;
&lt;div  class="outer-outlet"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
</code></pre>