Góc 2: xác định Bộ định tuyến trên Cấu phần khác với Bộ định tuyến

Question

Tôi vẫn đang làm việc trên một dự án sử dụng Angular2. Nếu bạn muốn biết thêm chi tiết về lý do tại sao tôi cần phải làm những gì tôi sẽ giải thích, vui lòng tham khảo issue này.

Tôi có một số AppComponent được khởi động qua bootstrap. Đó là một thành phần rất đơn giản:

@Component({ 
    selector: 'app-view', 
    directives: [ Devtools, MainComponent ], 
    template: ` 
     <ngrx-devtools></ngrx-devtools> 
     <main-cmp></main-cmp> 
    ` 
}) 
export class AppComponent { } 

Thành phần này bao gồm một số khác: MainComponent (thông qua bộ chọn main-cmp). Vì một số lý do, tôi muốn thiết lập định tuyến của mình trong MainComponent.

Đây là mã:

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES, NavComponent ], 
    template: ` 
     <h1>App</h1> 
     <nav-cmp></nav-cmp> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
    { path: '/medias', name: 'Medias', component: MediasComponent } 
]) 
export class MainComponent { 
    constructor (private router:Router, private store:Store<AppStore>) { 
     router.subscribe(url => store.dispatch(changeUrl(url))); 
    } 
} 

Cuối cùng, MainComponent bao gồm NavComponent mà là một nav rất cơ bản.

Vấn đề là, với thiết lập này, tôi gặp sự cố này: EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15].

Tất nhiên, nếu tôi di chuyển logic của bộ định tuyến đến AppComponent, mọi thứ hoạt động tốt.

Vì vậy, câu hỏi của tôi là: có cách nào để làm công cụ định tuyến thành một thành phần khác với thành phần được khởi động không?

Cảm ơn :).

Answer 1

Có vẻ như không thể thực hiện được vì phương pháp generate của lớp RouteRegistry được truy vấn một cách rõ ràng (mã hoá cứng) trên thành phần gốc. Xem dòng này trong mã nguồn:

• https://github.com/angular/angular/blob/master/modules/angular2/src/router/route_registry.ts#L345

Dưới đây là đoạn code mà trhows lỗi:

RouteRegistry.prototype._generate = function(linkParams, 
     ancestorInstructions, prevInstruction, _aux, _originalLink) { 
    (...) 
    var parentComponentType = this._rootComponent; // <---- 
    (...) 

    var rules = this._rules.get(parentComponentType); 
    if (lang_1.isBlank(rules)) { // <---- 
    throw new exceptions_1.BaseException("Component \"" + 
     lang_1.getTypeNameForDebugging(parentComponentType) + 
     "\" has no route config."); 
    } 

    (...) 
}; 

Phương pháp này được gián tiếp sử dụng từ phương pháp _updateLink của chỉ thị RouterLink .

Đây là stack trace tương ứng:

RouteRegistry._generate (router.js:2702) 
RouteRegistry.generate (router.js:2669) 
Router.generate (router.js:3174) 
RouterLink._updateLink (router.js:1205) 

Xem plunkr tôi đã sử dụng để gỡ lỗi vấn đề của bạn: https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview.

Answer 2

Làm cách nào để khắc phục sự cố - sử dụng thư mục gốc làm tuyến đường con?

@Component({ 
    selector: 'app', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
    <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    {path: '/...', as: 'Main', component: MainComponent, useAsDefault: true } 
]) 
export class App { } 

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
     <h1>App</h1> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
]) 
export class MainComponent { }