Угловая 2 маршрутизация (поведение маршрутизации)

Жаль, что я еще не знаком с Angular 2, я сделал свое исследование, но все еще смущен тем, как работает маршрутизация. Ниже мой маршрут конфигурации:Угловая 2 маршрутизация (поведение маршрутизации)

export const appRoutes: Route[] = [ 
    { 
     path: '', 
     component: SiteLayoutComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'full', 
       component: HomeComponent 
      }, 
      { 
       path: 'system', 
       children: [ 
        { 
         path: '', 
         pathMatch: 'full', 
         component: MenuItemListComponent, 
        }, 
        { 
         path: 'menuitemlist', 
         component: MenuItemListComponent, 
        }, 
       ], 
      }, 
      { 
       path: 'setting', 
       children: [ 
        { 
         path: '', 
         pathMatch: 'full', 
         component: CountryListComponent, 
        }, 
        { 
         path: 'countrylist', 
         component: CountryListComponent, 
        }, 
       ], 
      } 
     ], 
    }, 
];

Мой app.module выглядит следующим образом:

// Angular2 libraries 
import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 
import { APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common'; 

// Main 
import { AppComponent } from './app.component'; 
import { appRoutes, appComponents } from './app.routing'; 


@NgModule({ 
    // directives, components, pipes 
    declarations: [ 
     AppComponent, 
     appComponents 
    ], 
    // modules 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(appRoutes), 
    ], 
    providers: [ 
     { provide: LocationStrategy, useClass: PathLocationStrategy }, 
     { provide: APP_BASE_HREF, useValue: '/' }, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

Мой app.component выглядит следующим образом:

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

@Component({ 
    moduleId: module.id, 
    selector: 'content', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 
}

Мой index.html выглядит следующим образом :

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TEST</title> 


    <!-- npm packages --> 
    <script src="/node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.js"></script> 
    <script src="/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/node_modules/systemjs/dist/system.js"></script> 
    <script src="/node_modules/rxjs/bundles/Rx.js"></script> 


    <!-- Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 

    <script> 
     System.import('./app/boot').catch(
      function (err) { 
       console.error(err); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <content>Loading...</content> 
</body> 
</html>

Мой сайт-макет .component.html выглядит следующим образом:

<a routerLink="setting/countrylist"><span class="txt">Country</span></a> 
<a routerLink="system/menuitemlist"><span class="txt">Menu Item</span></a> 

<br /> 
<router-outlet></router-outlet>

Мое приложение дерево выглядит следующим образом:

Вопрос в том, что мой HTML выглядит, прежде чем нажать любые ссылки:

Это то, на что похоже, после нажатия на ссылку:

Проблемы возникают после нажатия ссылки, ссылки больше не работают. Извините за длинный пост, я уже отчаянно пытаюсь решить эту проблему, надеюсь, кто-то может мне помочь в этом. Я уже видел много ресурсов, но пока не нашел решения для этого. Заранее спасибо!

источник

2016-10-05 arvstracthoughts

Добавить

`pathMatch: 'full'`

на path: '' маршруты, если они не имеют детей маршрутов

' Добавить по пути

<a [routerLink]="'setting/countrylist'">

или удалить []

<a routerLink="setting/countrylist">

поэтому setting/countrylist передается как строка вместо выражения.

Если <a [routerLink]="..."> находится внутри маршрутизируемого компонента, запустите путь с помощью /, чтобы обеспечить абсолютную маршрутизацию вместо относительной маршрутизации.

источник

2016-10-05 04:48:57

hi Gunter my router link выглядит так: '{{subMenuInfo.name}}', это из массива классов. – arvstracthoughts

Не в коде в вашем вопросе (у меня была опечатка 'Ä' вместо' ''). –

благодарю вас за ответ Gunter, но знаете ли вы, почему маршрутизация ведет себя так, как я писал на изображении выше? – arvstracthoughts

Угловая 2 маршрутизация (поведение маршрутизации)

ответ

Смежные вопросы