Angular Router.navigate函数只会重新加载同一页面

Question

在浏览器URL字段中，我要输入的URL出现的时间少于1秒，并且页面重新加载了当前页面。在我的组件中，我创建了导航到另一个页面的功能，但是通过此功能它不起作用。但是，当我直接在浏览器的url字段中写入url时，它就起作用了。

我已在此stackblitz应用程序中代表过此问题。请检查它，以更好地理解。 https://stackblitz.com/edit/angular-lzfvru

这是我的文件：

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: './layout/layout.module#LayoutModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: './register/register.module#RegisterModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule {}

---

调用函数onRegister()应该会将我转移到另一页。

// login.component.ts
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {}

  onLogin() {
    localStorage.setItem('isLoggedin', 'true');
    this.router.navigate(['/dashboard']);
  }

  onRegister() {
    this.router.navigate(['/register']);
  }
}

---

// login-routes.module.ts
const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

并且有我要加载的模块

// register.component.ts
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {}

  createAccount() {}
}

---

// register-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: RegisterComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RegisterRoutingModule {}

所以我的项目三了

还有我的路由器守卫

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate() {
    if (localStorage.getItem('isLoggedin') || this.router.url === '/register') {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
  }
}

通过单击按钮可以调用方法router.navigate(['/register'])

直接在浏览器网址字段中写入网址

Answer 1

当您的应用程序找不到RegisterComponent时出现问题。

要解决此问题，您需要将loginModule添加到app.module.ts中。

在app.module.ts中添加以下内容。

...

import { LoginModule } from './login/login.module';

...

@NgModule({
  declarations: [AppComponent],
  imports: [
    ... ,
    LoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

很乐意提供帮助！