Question

我是使用Angular构建Web应用程序的新手，无法解决以下问题。

我正在尝试构建一个Web应用程序，该应用程序希望应用程序的用户首次登录并成功登录时将应用程序重定向到其中一个主页。

我目前面临的问题是，即使在成功登录后（我已经通过nodejs http响应200验证并且应用程序令牌在本地存储中设置），应用程序在成功后无法加载要加载的组件登录。

我可以看到URL确实更改为预期的Angular组件的加载。但是，尽管URL更改，角度组件也不会自行渲染。

以下是我使用过的代码 -

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

app.routing.ts

const appRoutes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: SignInComponent },
    { path: 'recruitment/home', component: RecruitmentHomeComponent, canActivate: [AuthGuard]},
    // otherwise redirect to home
    { path: '**', redirectTo: 'recruitment/home' }
];

登录in.component.ts

login() {
    this.loading = true;
    this.authenticationService.login(this.myForm.value.username, this.myForm.value.password)
      .subscribe(
      data => {
        this.router.navigate(['recruitment/home']);
      },
      error => {
        // this.alertService.error(error);
        this.loading = false;
      });
  }

招募-home.component.html

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <h1> Welcome to recruitment home </h1>
    </div>
    <div class="col-sm-6">
        <h2> Here is where all the action will be present </h2>
    </div>
  </div>
</div>

我已通过查看chrome验证登录服务是否成功 - ＆gt;检查 - ＆gt;申请 - ＆gt;本地存储

{success: true,…}
status
:
"You are successfully logged in!"
success
:
true
token
:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1YTczNmZkYTYyOGVjODMxZjQ0NDAyYmkjadfkajlkjuadfkjljadf.vL1DNHaz9DZo2j7yAVks4oAUwAR6lAs5qIWDuwVrX7o"

app.component.html在应用程序加载时呈现sign-in .component.html在同一空间内成功登录后无法加载recruitment-home.component.html。

我尝试过使用stackblitz在线工具来验证代码并观察到一件奇怪的事情。当我尝试从stackblitz中运行相同的代码并使用“打开”选项在代码旁边呈现输出时，我能够看到根据需要加载的recruitment-home.component.html。但是，使用相同的stackblitz工具，当我选择在新窗口中呈现输出的选项时，会观察到我在本地运行应用程序时看到的相同问题。

我不确定如何调试此问题。围绕这个的任何指针都会非常有用。

Answer 1

问题现已解决。我刚刚意识到recruitment-home.component.html行没有设置style =“margin-top：50px”属性。当我添加属性时，我能够看到正在按要求呈现的组件。

<div class="fluid-container">
  <div class="row" style="margin-top: 250px">
    <div class="col-sm-6">
      <h3> Welcome to recruitment home </h3>
    </div>
    <div class="col-sm-6">
        <h3> Here is where all the action will be present </h3>
    </div>
  </div>
</div>

路由器导航无法加载角度组件

1 个答案: