Угловая 2 Маршрутизация с домашней страницей

Question

Учусь Angular2 Маршрутизация и попробуйте отобразить страницу приветствия. Мое приложение имеет три страницы

• Добро пожаловать страницу (это просто пустая страница с только ссылки на другие маршруты)
• Главная страница - Некоторые тексты и описания
• Todo Список страницы - Список Todos

Проблема в том, что я не могу отобразить страницу приветствия. Он автоматически загружает главную страницу и показывает контент из HomeComponent по умолчанию.

Как показано на скриншоте, я хочу отображать только 2 ссылки. Я хочу загрузить контент из Home/Todo только при нажатии. Но по умолчанию он переходит на localhost: xxx/Home и загружает главную страницу.

Я попытался установить «» пустой путь к AppComponent, как показано ниже, но он загружает AppComponent дважды и показывает ссылки в два раза.

{ path: '', component: AppComponent, pathMatch: 'full' }, 

app.module.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     RouterModule.forRoot([ 
      { path: 'home', component: HomeComponent }, 
      { path: 'todo', component: TodoListComponent }, 
      { path: '**', redirectTo: 'home', pathMatch: 'full' } 
     ]) 
    ], 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     TodoListComponent 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

app.component.ts

import { Component } from "@angular/core" 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    template: ` 
    <div> 
     <nav class='navbar navbar-default'> 
      <div class='container-fluid'> 
       <a class='navbar-brand'>{{pageTitle}}</a> 
       <ul class='nav navbar-nav'> 
        <li><a [routerLink]="['/home']">Home</a></li> 
        <li><a [routerLink]="['/todo']">To Do</a></li> 
       </ul> 
      </div> 
     </nav>   
    </div> 
    <div class='container'> 
      <router-outlet></router-outlet> 
     </div> 
    ` 
}) 
export class AppComponent {  
} 

дом/home.component.ts

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

@Component({ 
    moduleId: module.id,  
    templateUrl: "home.component.html"  
}) 
export class HomeComponent { 
} 

дома/home.component.html

<h1>Hello from Home Component</h1> 
<h2>This is my first TODO App for Angular 2...</h2> 

Answer 1

Я думаю, что причина, что отображается HomeComponent потому, что ваш <router-outlet></router-outlet> изменит базовый компонент с home, когда URL является/дома. Кроме того, эта строка в вашем app.module.ts

{ path: '**', redirectTo: 'home', pathMatch: 'full' },

, что означает, что все ваши URL-адресов, которые не соответствуют /home или /todo сделает вашу HomeComponent всплывал. Вы можете попробовать удалить перенаправление:

{ path: '**', redirectTo: 'home', pathMatch: 'full' } или перенаправлять на '' вместо (или новый PageNotFoundComponent).

Также убедитесь, что ни один из элементов (дома или todo) в вашем меню не выбран при загрузке страницы.

Answer 2

вам необходимо удалить эту строку {путь: '**', RedirectTo: 'домой', pathMatch: 'полный'}

, что вы упоминаете в приведенном выше линии

если URL другое, что/home или/todo приходит, пожалуйста, перенаправляйте в/домой.Чтобы он всегда отображал Home.

Так что ваш app.module.ts должен быть

@NgModule({ 
 
    imports: [ 
 
    BrowserModule, 
 
    RouterModule.forRoot([ 
 
     { path: 'home', component: HomeComponent }, 
 
     { path: 'todo', component: TodoListComponent }, 
 
     { path: '**', redirectTo: 'home', pathMatch: 'full' } 
 
    ]) 
 
    ], 
 
    declarations: [ 
 
    AppComponent, 
 
    HomeComponent, 
 
    TodoListComponent 
 
    ], 
 
    bootstrap: [AppComponent], 
 
}) 
 
export class AppModule { }

Это позволит устранить проблему. Я попробовал, и это было исправлен

чек ниже ссылка для использования маршрутизации в угловом 2 http://www.angularinfo.com/routings/