각도 2 라우팅 (routingLink 비헤이비어)

죄송합니다. 아직 각도 2에 익숙하지 않아 연구를 수행했지만 라우팅이 어떻게 작동하는지 혼란 스럽습니다. 다음은 내 경로 설정입니다 :각도 2 라우팅 (routingLink 비헤이비어)

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은 다음과 같습니다

문제는 내 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>

내 응용 프로그램 트리 다음과 같습니다

링크를 클릭하면 다음과 같이 표시됩니다.

문제는 링크를 클릭 한 후 더 이상 작동하지 않는 것입니다. 긴 게시물을 보내서 죄송합니다. 이미이 문제를 해결하기 위해 필사적으로 노력하고 있습니다. 누군가가이 문제에 관해 저를 도울 수 있기를 바랍니다. 나는 이미 많은 자원을 보았지만 아직 어떤 해결책도 발견하지 못했다. 미리 감사드립니다. 그들은 자녀 노선이없는 경우

출처

2016-10-05 arvstracthoughts

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

또는 제거

경로 주위 ' 추가

`pathMatch: 'full'`

path: ''에 경로를 추가 []

<a routerLink="setting/countrylist">

이므로 setting/countrylist은 표현식 대신 문자열로 전달됩니다.

<a [routerLink]="...">이 라우팅 된 구성 요소 안에있는 경우 상대 경로 대신 절대 라우팅을 보장하려면 / 경로를 시작하십시오.

출처

2016-10-05 04:48:57

안녕 Gunter 내 라우터 링크는 다음과 같습니다 :'{{subMenuInfo.name}}', 그것은 클래스 배열입니다. – arvstracthoughts

질문에 코드에 없습니다 (필자는'''대신 오자''를 사용했습니다). –

Gunter의 응답에 감사드립니다. 그러나 위의 이미지에 게시 한 것과 같은 라우팅이 작동하는 이유는 무엇입니까? – arvstracthoughts

각도 2 라우팅 (routingLink 비헤이비어)

답변

관련 문제