Angular Маршрутная дочерняя страница добавляется непосредственно в приложение- root - PullRequest
Новая
       19

Angular Маршрутная дочерняя страница добавляется непосредственно в приложение- root

0 голосов
/ 08 апреля 2020

Я новичок в angular, и у меня настроена моя страница следующим образом. 

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

const appRoutes: Routes = [  { path: 'home', component: HomeComponent },{ path: 'login', component:LoginComponent },{ path: '', redirectTo: '/home', pathMatch: 'full' }];

Когда я на домашней странице, она отображается с помощью NavBar и ниже NavBar содержимое моей домашней страницы отображается правильно , Принимая во внимание, что когда я переключаюсь на / страницу входа, содержимое страницы входа не отображается ниже navbar, тогда как оно отображается сверху страницы. 

<div class="container">
<div class="row">
    <div class="col-md-8">
        <form>
            <!-- Grid row -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        <h3>Register and Run - WRNK</h3>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group row">
                        <!-- Default input -->
                        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-md-8">
                            <input mdbInput type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <!-- Grid row -->

                    <!-- Grid row -->
                    <div class="form-group row">
                        <!-- Default input -->
                        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-md-8">
                            <input mdbInput type="password" class="form-control" id="inputPassword3"
                                placeholder="Password">
                        </div>
                    </div>
                    <!-- Grid row -->

                    <!-- Grid row -->
                    <div class="form-group row">
                        <div class="col-md-8">
                            <button type="submit" mdbBtn color="primary">Sign in</button>
                        </div>
                    </div>
                </div>
                <!-- Grid row -->
            </div>
        </form>
    </div>

</div>

введите описание изображения здесь

...