Как отобразить только содержимое компонента в Router of Angular 6? - PullRequest
Новая
       25

Как отобразить только содержимое компонента в Router of Angular 6?

0 голосов
/ 19 октября 2018

Это базовое приложение, и у меня AppComponent по умолчанию.Я использовал флаг --routing для генерации маршрутизации для приложения Angular 6.Я сгенерировал «AboutComponent», чтобы разместить о нас содержимое страницы.Однако, наряду с содержимым страницы «О нас», «/ about» также отображает содержимое AppComponent.как показано ниже

Добро пожаловать на домашнюю страницу.Это страница о нас.

Как избежать AppComponent / любого другого содержимого компонента в маршруте '/ about'?

У меня такая же проблема с '/ contact'.

Добро пожаловать на HomePage Это страница с нами.

Должны ли мы даже хранить контент HomePage в AppComponent?Пожалуйста, уточните это, спасибо заранее.

app.component.html: 

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1>Welcome to Home Page</h1>
    </div>
</div>

about.component.html 

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1>About Us</h1>
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

Я не совсем уверен, что не так в вашем коде, поскольку мне нужно больше информации, но маршрутизация компонентов в angular выполняется именно так.

В вашем app.module.ts укажите путь иИмена компонентов и добавить его в оператор импорта 

import {Router, RouterLink,Routes, RouterModule, RouterLinkActive} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about/aboutus.component';

const routes: Routes =
[
  {path:'Home', component: HomeComponent},
  {path:'AboutUs',component:AboutUsComponent},
  {path: '', redirectTo: 'Home', pathMatch: 'full' } <== this code makes sure Home component opens by default

]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutUsComponent,    
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
  ],

Затем в вашем app.component.html 

<router-outlet></router-outlet>

Причина в том, что ваш app.component.ts имеет определенный тег, такойкак <app-root></app-root>, который находится в вашем файле index.html, из-за чего он невольно рендерится.Поэтому мы используем app.component.html в качестве файла для размещения тех элементов, которые мы хотим всегда отображать, и <router-outlet> будет отображать те элементы, которые могут измениться при навигации

0 голосов
/ 19 октября 2018

Я понял это!Кажется, я не должен использовать AppComponent в качестве HomePage.Я удалил содержимое домашней страницы из AppComponent html (только что сохранил теги), и теперь он работает.«/ about» имеет только контент, а «/ contact» имеет только контактный контент.Я создал новый HomeComponent, разместил все содержимое домашней страницы и установил его в качестве маршрута по умолчанию.Спасибо за ваши ответы, они были полезны.

0 голосов
/ 19 октября 2018

Причиной вашей проблемы является позиционирование <router-outlet>.Глядя на ваше описание, похоже, у вас есть выход маршрутизатора на домашней странице.поэтому домашняя страница будет постоянной при маршрутизации.Если вы хотите изменить полный вид вместе с домашней страницей, вы должны указать выход маршрутизатора в родительской домашней странице и указать правильный маршрут для домашней страницы!

...