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>
答案 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来实现不同的路由行为。