Angular 角度路由器。导航不重定向到目标页面

我有一个登录表单，它应该重定向到主应用程序页面：

我不确定如何导航到此页面：应用程序/分析，并认为这是由于我的路线设置，我无法在提交登录表单时导航到正确的页面

这就是我迄今为止所尝试的

应用程序路径

export const ROUTES: Routes = [
  {
    path: 'login', loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: '', redirectTo: 'app/analytics', pathMatch: 'full'
  },
  {
    path: 'app',   loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]
  },
  {
    path: 'error', component: ErrorComponent
  },
  {
    path: '**',    component: ErrorComponent
  }
];

const routes: Routes = [
    { path: '', component: LayoutComponent, children: [
    { path: 'analytics', loadChildren: '../pages/analytics/analytics.module#AnalyticsModule' },
    { path: 'profile', loadChildren: '../pages/profile/profile.module#ProfileModule' },
    { path: 'widgets', loadChildren: '../pages/widgets/widgets.module#WidgetsModule' },
  ]}
];

export const ROUTES = RouterModule.forChild(routes);

布局。路线

export const ROUTES: Routes = [
  {
    path: 'login', loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: '', redirectTo: 'app/analytics', pathMatch: 'full'
  },
  {
    path: 'app',   loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]
  },
  {
    path: 'error', component: ErrorComponent
  },
  {
    path: '**',    component: ErrorComponent
  }
];

const routes: Routes = [
    { path: '', component: LayoutComponent, children: [
    { path: 'analytics', loadChildren: '../pages/analytics/analytics.module#AnalyticsModule' },
    { path: 'profile', loadChildren: '../pages/profile/profile.module#ProfileModule' },
    { path: 'widgets', loadChildren: '../pages/widgets/widgets.module#WidgetsModule' },
  ]}
];

export const ROUTES = RouterModule.forChild(routes);

我的路由器出口存在于布局模板和应用组件中

我有一个登录组件，它调用

此.router.navigate['app/analytics']

export class LoginComponent {
  @HostBinding('class') classes = 'login-page app';

  constructor(private auth: AuthService, private router: Router) {}

  loginUser(event) {
    event.preventDefault();
    const target = event.target;
    console.log(target)
    const username = target.querySelector('#username').value;
    const password = target.querySelector('#password').value;

    this.auth.getUserDetails(username, password).subscribe(data => {
      console.log(data.status)
      if(data.status == "success") {
        this.router.navigate['app/analytics'];
        this.auth.setLoggedIn(true);
        console.log(this.auth.isLoggedIn);
      }
      else {
        window.alert(data.message)
      }
    });
  }
}

这是在我的登录时调用的。模板：

            <form class="login-form mt-lg" (submit)="loginUser($event)">
              <div class="form-group">
                <input type="text" class="form-control" id="username" value="USERNAME" placeholder="Username">
              </div>
              <div class="form-group">
                <input class="form-control" id="password" type="password" value="PASSWORD" placeholder="Password">
              </div>
              <div class="clearfix">
                <div class="btn-toolbar float-right m-t-1">
                  <button type="button" class="btn btn-default btn-sm">Create an Account</button>
                  <button type="submit" class="btn btn-inverse btn-sm" >Login</button>
                </div>
              </div>
              <div class="row m-t-1">
                <div class="col-md-6 order-md-2">
                  <div class="clearfix">
                    <div class="form-check abc-checkbox widget-login-info float-right pl-0">
                      <input class="form-check-input" type="checkbox" id="checkbox1" value="1">
                      <label class="form-check-label" for="checkbox1">Keep me signed in </label>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 order-md-1">
                  <a class="mr-n-lg" href="#">Trouble with account?</a>
                </div>
              </div>
            </form>

创建帐户
登录
让我登录

要解决您的问题，您必须编辑您的

路由器。在
LoginComponent
中导航

，从根目录开始：

this.router.navigate（['/app/analytics']）（不要忘记括号），否则路由器将尝试导航到
登录/app/analytics

还要确保你的
警卫让你通过

我还将从您的
应用程序中删除重定向。路由
{path:''，重定向到：'app/analytics'，pathMatch:'full'}，
，并将其放置在布局中。路由

类似于：

{path:''，重定向到：'./analytics'，pathMatch:'full'}，

请尝试按此顺序调用您的方法

this.auth.getUserDetails(username, password).subscribe(data => {
   console.log(data.status)
   if(data.status == "success") {
      this.auth.setLoggedIn(true); // First set login to true
      this.router.navigate(['/app/analytics']); // Then navigate to the route
      console.log(this.auth.isLoggedIn);
   }
   else {
      window.alert(data.message)
   }
});

---

要解决您的问题，您必须编辑您的

路由器。导航
，在
LoginComponent
中，从根目录开始：
this.router.navigate（['/app/analytics']）（不要忘记括号），否则路由器将尝试导航到
登录/app/analytics

还要确保你的
警卫让你通过

我还将从您的
应用程序中删除重定向。路由
{path:''，重定向到：'app/analytics'，pathMatch:'full'}，
，并将其放置在布局中。路由
类似于：
{path:''，重定向到：'./analytics'，pathMatch:'full'}，

请尝试按此顺序调用您的方法

this.auth.getUserDetails(username, password).subscribe(data => {
   console.log(data.status)
   if(data.status == "success") {
      this.auth.setLoggedIn(true); // First set login to true
      this.router.navigate(['/app/analytics']); // Then navigate to the route
      console.log(this.auth.isLoggedIn);
   }
   else {
      window.alert(data.message)
   }
});

您必须使用以下命令来创建该组件：

这个。路由器。导航[“”]
 您必须使用以下命令来编辑该组件：

这个。路由器。导航[“”]
 你应该使用
this.router.navigate['/app/analytics']。应用程序前的斜杠很重要。请参阅进一步的了解。我认为您需要将其称为
this.router.navigate（['app'，'analytics'）改为。你在analytics.module中使用RouterModule吗？@yusufcmrt我在analytics.module中使用RouterModule，RouterModule.forChild（路由），你应该使用
this.router.navigate['/app/analytics']。应用程序前的斜杠很重要。请参阅进一步的了解。我认为您需要将其称为
this.router.navigate（['app'，'analytics'）
改为。你在analytics.module中使用RouterModule吗？@yusufcmrt我在analytics.module中使用RouterModule，RouterModule.forChild（routes），对不起，我的意思是输入错误，我是说
/app/analytics
。并确保警卫返回
true
，否则您无法访问路由。建议的更改仍保持相同的行为。我在布局路线的顶部添加了./analytics，并更改了导航路线以在开始时包含/。尝试重新排列我的getUserDetails，包括console.log和run。data.success给出“success”，auth.isLoggedIn给出“true”。此router.navigate仍保留在同一登录页是否可能您只是忘记使用
路由器。使用
（）
作为功能导航？e、 g.
this.router.navigate（['/app/analytics']）（参见答案）括号就是问题所在。非常感谢。很抱歉我输入了一个错误，我是说
/app/analytics
。并确保警卫返回
true
，否则您无法访问路由。建议的更改仍保持相同的行为。我在布局路线的顶部添加了./analytics，并更改了导航路线以在开始时包含/。尝试重新排列我的getUserDetails，包括console.log和run。data.success给出“success”，auth.isLoggedIn给出“true”。此router.navigate仍保留在同一登录页是否可能您只是忘记使用
路由器。使用
（）
作为功能导航？e、 g.
this.router.navigate（['/app/analytics']）（参见答案）括号就是问题所在。非常感谢你。