Question

我正在构建一个网页，该网页以一个简单的登录框开头，其中包含用户名，带有输入框的密码以及两个带有名称登录和注册的按钮。

单击登录按钮后，我的页面应路由到另一个包含导航栏的组件。它确实路由，在那里没有问题。但是，路由后登录框不会消失。

因此，在路由之后，会出现导航栏，但登录框仍然存在。

APP.COMPONENT.HTML

      <div class="background-image">

          <router-outlet></router-outlet>
         <div class="content2">

          <h2 >Login</h2>
         <br>

        <form>
       <div class="form-group">
              <label style="margin: 5px">Username</label>

           <input type="text"  />

           </div>
            <div class="form-group">
             <label style="margin: 7.5px">Password</label>

             <input type="password" />

         </div>
           <div class="form-group">
       <button (click)="onclick()" [disabled]="loading" class="btn btn- 
        primary">Login</button>
      <a href="/register" class="btn btn-link">Register</a>
            </div>
          </form>
      </div>
         </div>

APP.COMPONENT.TS

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
       selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
           })
   export class AppComponent {
       title = 'welfareUI';
       constructor(private router: Router){

         }
      onclick()
      {
          this.router.navigateByUrl('/navbar');
      }

     }

Answer 1

这是因为您已将登录html放置在app.component.html中。 <router-outlet></router-outlet>替换当前路由的模板，除了此文件中的所有html都是常量。

您可以创建一个单独的登录组件。默认情况下，导航到登录组件。不要将登录html保留在app.component.html

中

Answer 2

创建用于登录的单独组件。将HTML代码插入login.html，并将路由器出口放置在app.html文件中。

Answer 3

您已经创建了loginComponent并将您的登录代码放入其中，然后使用路由器路径将登录组件显示为默认 {path：''，redirectTo：'/ heroes'，pathMatch：'full'}，可以参考下面的链接 https://angular.io/guide/router#the-default-route-to-heroes

Answer 4

@Yash Anand无论@Adrita Sharma说的是正确的。您将创建一个新的登录组件，并将登录html标记保留在login.component.html中。仅将<router-outlet></router-outlet>保留在app.component.html中。现在，当您单击登录按钮时，它将仅显示导航栏。注意-请确保默认情况下已将路由配置为进入app.module中的登录页面。

routes: [{path : '', component: LoginComponent}]

Answer 5

创建登录组件并将其最初加载到路由器插座中。 routes: [{path : '', component: LoginComponent}]

点击登录按钮后，呼叫您要导航的其他路线。

路由：[{路径：'/ abc'，组件：abcComponent}]

路由也显示上一页的内容

5 个答案: