Angular 2-在一条路径中设置多个组件而不使用TypeScript丢失数据的最佳方法是什么

时间:2016-11-10 07:01:59

标签: angular typescript

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
                },
            ]
        }
    ]
},];

如何在联系和注册组件中维护输入字段数据。 使用多个子视图时,将一个子组件移动到另一个子组件时会丢失数据。

DashBoard组件1:

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

DashBoard组件2:

@Component({
selector: 'Contact',
template: `<input type="text" required>`,})
 export class ContactComponent{
constructor(public router: Router) {}}
 <div>
   <a class="Registratin"  [routerLink]="[':/registaration']" routerLinkActive="active">
                 </a>
   <a class="Contact"  [routerLink]="[':/contact']">
                 </a>
   </div>
<div  class="outer-outlet">
      <router-outlet></router-outlet>
    </div>

1 个答案:

答案 0 :(得分:0)

当您从RegistrationComponent路由到ContactComponent时,angular会破坏当前组件,即RegistrationComponent,然后加载新的ContactComponent。这就是您在注册模板中丢失输入数据的原因。

有不同的方法可以解决这个问题:

1. 使用结构指令或[隐藏]
如果组件在上下文中完全不同,则理想情况下应使用路由。而不是路由,使用ngIf来隐藏/显示组件。 类似......

<Registration [hidden]="id!=1"></Registration>
<Contact [hidden]="id!=2"></Contact>   

2. 使用服务传达数据
一个。 向提供商注入服务并向/从服务设置/获取数据
在导航之前使用Resolve Guard预取数据

如果你想深入挖掘,请通过角度2 offical routing example来实现不同的路由行为。