Question

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

我的SPA分为3个部分，nav，content和footer。内容区域将加载新组件，具体取决于在nav组件中选择的菜单选项。我认为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中，即。处理根路由的组件。如果用router-outlet替换app-content-component，应该可以工作。

如果您真的非常想在内容组件和最小的AppComponent中使用其余的布局，那么您可以在AppComponent中使用它（免责声明：尚未尝试过）：

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

，这在内容组件中：

<ng-content></ng-content>

此外，还不是一个bug（但是），但是在导航中你应该使用像/ signup这样的绝对路由器链接，以防以后你可能有子路由的路由。

Answer 2

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

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

2 个答案: