Góc 2 chế độ xem lồng nhau mà không có URL AUX

Question

Tôi đang thử Định tuyến số 2.

Ứng dụng của tôi có 4 trang và 4 tuyến (r1, r2, r3, r4). Tôi muốn tách riêng hai nhóm của các trang này. Trường "nội dung 1" cho r1 và r2 sẽ giống nhau. Đối với r3 và r4, trường "Nội dung 1" sẽ giống nhau và trường "Nội dung 2" sẽ thay đổi cho mỗi tuyến đường.

Tôi có thể thực hiện việc này bằng cách gọi Thành phần trong Mẫu, nhưng trường "Nội dung 1" đang được biên dịch lại.

Tôi không muốn sử dụng định tuyến AUX. URL trông xấu xí.

Tôi có thể làm điều này trước đây trong Angular 1. Làm thế nào tôi có thể làm điều đó trong Angular 2?

Answer 1

Bạn có thể tạo ra một cái gì đó như thế này bằng cách làm cho từng nội dung chặn một thành phần riêng biệt và ở vị trí tuyến đường App của bạn như sau:

<header></header> 
<content-1></content-1> 
<router-outlet></router-outlet> 
<footer></footer> 

Bây giờ cấu hình router mà nó cho thấy đúng content 2 dữ liệu cho tuyến đường cụ thể. Các thành phần cũng có thể giao tiếp để bạn có thể chuyển dữ liệu có liên quan đến thành phần content-1 (xem Component interaction trong tài liệu Góc).

Answer 2

Dường như bộ định tuyến mặc định 2 góc không thực sự hỗ trợ nhiều chế độ xem có tên. Tính năng định tuyến AUX lạ (có tên là cửa hàng) có thể hữu ích trong một số trường hợp hiếm hoi (cửa sổ bật lên, khu vực động vv) nhưng hoàn toàn không thể sử dụng cho các mẫu chính-con cổ điển với nhiều trình giữ chỗ.

Một giải pháp cấp tiến có thể chuyển sang ui-router for angular-2 thay vì mặc định.

Answer 3

Bạn có thể thực hiện việc này bằng cách đặt tên bộ định tuyến như sau.

Giả sử bạn đang tải appComponent đầu tiên,

app.component.html

<header></header> 
<router-outlet name='content1_r1_r2'><router-outlet/> 
<router-outlet name='content1_r3_r4'><router-outlet/> 
<router-outlet name='content2'><router-outlet/> 
<footer></footer> 

cấu hình router của bạn như sau:

{ 
    path: 'r1', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr12Component, outlet: 'content1_r1_r2' }, 
     { path: '', component: contentr1Component, outlet: 'content2' } 
    ] 
} 
// write same for r2 just change content1Component you want to load on /r2 route. 

{ 
    path: 'r3', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr34Component, outlet: 'content1_r2_r4' }, 
     { path: '', component: contentr3Component, outlet: 'content2' } 
    ] 
} 

// write same for r4 just change content3Component you want to load on /r4 route. 

Trong mã contentr12Component trên sẽ vẫn giống nhau cho r1 và r2 route, contentr34Component sẽ giữ nguyên cho r3 và r4. bạn có thể thay thế tên theo thành phần của bạn.

Điều này cũng sẽ tránh URL tìm kiếm xấu xí.