导航组件在加载新组件时变得无响应

Question

我的 Angular 应用程序遇到了一个奇怪的问题。当我加载一个新组件 SignupComponent 时，我的另一个组件 NavComponent 变得无响应。在应用程序加载时，我可以在nav 组件的登录表单中的username 和password 字段中输入数据。但是，如果我单击signup 链接（也在导航组件中并加载SignupComponent），登录表单和nav 中的链接变得无响应（我什至没有将手形光标悬停在链接）。我无法再在username 和password 字段中输入数据。

我的 SPA 分为 3 个部分，nav、content 和 footer。内容区域将加载新组件，具体取决于在导航组件中选择了哪个菜单选项。 nav 和 footer 区域应该始终可见。 content 区域是动态的。

app.component.html

<div class="css-grid-container">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component> <!--this component has router-outlet to put new componnents in it -->
    <app-footer-component></app-footer-component>
  </div>

app-content-component 有路由器链接，我用它来加载新组件

<router-outlet></router-outlet>

路由文件是

const routes:Routes = [
  {
    path: 'signup',
    component: SignupComponentComponent //this components gets loaded in router-link of ContentComponent when signup form in nav component is clicked
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch:'full'
  },
  {
    path: 'home',
    component:HomepageContentComponentComponent //this component gets loaded when in router-link when home page is loaded.
  }
];

nav 有几个菜单项、一个内联登录表单（用户名/密码）以及一个注册链接。路由器文件有在content区域加载新组件的规则。

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="index.html">CodingJedi</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbar1">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="widgets.html">About</a>
      </li>
    </ul>

    <ul class="navbar-nav navbar-right">
      <li><!-- Navbar Form -->
        <form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
          <label for="username" class="control-label required sr-only">Username</label>
          <input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
          <app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
          <label for="password" class="control-label required sr-only">Password</label>
          <input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
          <app-show-errors [control]="loginForm.controls.password"></app-show-errors>

            <button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>

        </form>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='signup'>Sign Up</a>
      </li>
    </ul>
  </div>
</nav>

点击注册链接后，会加载一个注册表格。

<div class="div__signup"> 
  <div class="content_div--white">

    <form class="signup-form form-group" [formGroup]="signupForm" (ngSubmit)="addUser()" novalidate>
      <label for="firstname" class="control-label required">First Name</label>

      <input id="firstname" type="text" class="form-control" formControlName="firstName" [ngClass]="validateField('firstName')" required>
      <app-show-errors [control]="signupForm.controls.firstName"></app-show-errors>

      <label for="lastname" class="control-label required">Last Name</label>
      <input id="lastname" type="text" class="form-control" formControlName="lastName" [ngClass]="validateField('lastName')" required>
      <app-show-errors [control]="signupForm.controls.lastName"></app-show-errors>

      <label for="email" class="control-label required"> Email</label>
      <input id="email" type="email" class="form-control" formControlName="email" [ngClass]="validateField('email')" required>
      <app-show-errors [control]="signupForm.controls.email"></app-show-errors>

      <label for="password" class="control-label required">Password</label>
      <input id="password" type="password" class="form-control" formControlName="password" [ngClass]="validateField('password')" required>
      <app-show-errors [control]="signupForm.controls.password"></app-show-errors>

      <label for="verify-password" class="control-label required">Verify Password</label>
      <input id="verify-password" type="password" class="form-control" formControlName="confirmPassword" [ngClass]="validateField('confirmPassword')" required>
      <app-show-errors [control]="signupForm.controls.confirmPassword"></app-show-errors>


      <button type="submit"  id="signup-button" class="content-div__button--blue"> Sign Up! </button>
    </form>
  </div>
</div>

Answer 1

我认为这是您的插座在子组件中，而不是在 AppComponent 中，即。处理根路由的组件。如果您将 app-content-component 替换为 router-outlet，则应该可以工作。

如果您真的非常希望将布局的其余部分放在内容组件和最小的 AppComponent 中，您可能会在 AppComponent 中侥幸逃脱（免责声明：未尝试过）：

<app-content-component><router-outlet></router-outlet><app-content-component>

这在内容组件中：

<ng-content></ng-content>

另外，还不是错误，但在您的导航中，您应该使用绝对路由链接，例如 /signup，以防以后您可能有带有子路由的路由。

Answer 2

问题不在于角度，而在于我的 CSS。 SignupComponent 的 css 错误。我给了它绝对位置（位置：绝对，顶部：0，左侧：0），使其覆盖整个页面。所以当我以为我在点击导航时，我实际上是在 SignupComponent 内部点击