Angular 除非填写表格，否则请保持在同一页上

用户登录后，他们进入表单。其中包含名称和用户名

http://localhost:4200/form

我希望用户填写表单，然后重定向到任何其他页面。我如何确保即使用户更改了url，他们也不会去任何地方，除非他们填写表单

app-routing.module.ts

  {
    path: "create-profile/:username",
    component: profileComponent,
    canActivate: [AuthGuard]
  },

现在，当用户登录时，它将转到该组件

submit(form: any) {
    this.username = form.username;
    this.name= form.name;
    this.auth.changePassword(form).subscribe(data => {
      this.snackBar.open("profile created", "close", {
        duration: 3000
      });
    });
  }

---

在这之后，我不知道该怎么办？我还不熟悉angular

您的解决方案需要两步：

创建一个服务来存储表单的状态。例：有效/无效。一个常见的场景是维护用户是否登录、是否具有访问权限等

为其他路由创建一个路由保护，并使用来自#1的服务检查表单的状态，以允许/禁止导航

---

请查看提交中的

，您可以检查：-

submit(form: any){
  if (form.valid) {
    //write your auth gurd service code here to check 
}
}

在路由文件中：- 你可以这样写

{ path: '', redirectTo:'login', pathMatch="full" canActivate: [AuthGuard]}
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] }

---

AuthGuard是您可以编写的服务

我需要一些编码示例来明确这个概念。我都知道，但我不知道如何实现它们。你能分享一些你迄今为止尝试过的代码吗？我已经更新了我的问题。请查收。此外，我有身份验证警卫，但检查用户是否登录！下面是一个有效的stackblitz示例：。我实际上并没有创建表单，而是使用

formComponent

中的一个简单按钮模拟表单填充状态。