Angular 路由器。在子项之间保持状态，事件用户输入-解网

问：

我正在使用 Angular 16。我有一个父组件：带有路由。有两个子路由：带路由和带路由。ComponentA'/parent-component/:customId'ComponentAChildComponent1'/child1'ChildComponent2'/child2'

ComponentA有两个链路和路由器插座，如下所示：

<a routerLink="child1">Child1</a>
<a routerLink="child2">Child2</a>
<router-outlet></router-outlet>

ChildComponent1首先调用API，然后创建动态表单。

当用户导航到，填写表单并转到并返回时，再次加载所有表单（调用 API 并重新创建动态表单），用户将丢失其工作。因此，我想保留用户输入，并且不想再次调用并创建动态表单。child1child2child1child1

有没有一种方法可以持久化状态，甚至是用户在表单条目中写入的内容？child1

Angular-Reactive-Forms 角-路由器 Angular-State-Managmement


export class CompAService {
  private formState$: BehaviorSubject<YourFormInterface | undefined> = new BehaviorSubject(undefined);

  constructor() { }

  getFormState() : Observable<YourFormInterface> {
    return this.formState$.asObservable()
  }
  
  updateFormState(state:YourFormInterface): void {
     this.formState$.next(state)
  }
}

在 Component1 ts 文件中，您将订阅每次组件加载到视图中时获取表单状态，如果组件在第一次加载时加载，您将在订阅中收到“undefined”，您可以调用 API 来获取状态所需的任何数据


@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})
export class Child1Component {
  form: FormGroup = new FormGroup() // your form group

  constructor(private compAService:CompAService, private destroyRef:DestroyRef){}

  ngOnInit():void{
    this.compAService.getFormState().pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe(state=>{
       if (!state) {
         this.setFormState()
       }else {
         this.form.patchValue(...state) // set all your values to the form 
       }
    })
  }

  setFormState():void {
    // on receiving your response from api call OR receiving values from your 
    // html form, set the state so you get it the next time
    this.compAService.updateFormState(state)
  }
}

上一个：错误 TS2531：对象可能为“null”。在表单数组控件上

下一个：如何在 Angular 14 中使用 ngx-intl-tel-input 库

Angular 路由器。在子项之间保持状态，事件用户输入

Angular Router. Keep state between childrens, event user inputs

评论