Маршрутизация также отображает содержимое предыдущей страницы

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

Создайте компонент входа и загрузите его изначально в розетку маршрутизатора.routes: [{path : '', component: LoginComponent}]

После нажатия кнопки входа в систему вызовите другой маршрут, по которому вы хотите ориентироваться.

маршруты: [{путь: '/ abc', компонент: abcComponent}]

Answer 2

@ Яш Ананд. Что бы ни сказала @Адрита Шарма, это правильно. Вы создаете новый компонент входа и сохраняете разметку html имени входа в login.component.html. оставьте только <router-outlet></router-outlet> в app.component.html Теперь, когда вы нажимаете кнопку входа в систему, она отображает только вашу панель навигации. Примечание. Убедитесь, что по умолчанию вы настроили свой маршрут для перехода на страницу входа в app.module.

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

Answer 3

Создать отдельный компонент для входа в систему.Вставьте HTML-код в login.html и поместите выход маршрутизатора в файл app.html.

Answer 4

у вас есть создать loginComponent и поместить в него свой код входа в систему, а затем использовать путь маршрутизатора, чтобы показать компонент входа в систему по умолчанию {путь: '', redirectTo: '/ heroes', pathMatch: 'full'}, можете ссылаться ниже ссылку https://angular.io/guide/router#the-default-route-to-heroes

Answer 5

Это потому, что вы поместили html логин в app.component.html. <router-outlet></router-outlet> заменяет шаблон текущего маршрута, за исключением того, что все html в этом файле являются постоянными.

Вы можете создать отдельный компонент для входа. По умолчанию перейдите к компоненту входа. Не сохраняйте логин html в app.component.html