Áp dụng Giải quyết để thành phần gốc trong Angular2

Question

Trong Angular2 chúng ta có thể sử dụng Resolve như sau:

import { UserResolver } from './resolvers/user.resolver.ts'; 

export const routes: RouterConfig = [ 
    { 
    path: 'users/:id', 
    component: UserComponent, 
    resolve: { 
     transaction: UserResolver 
    } 
    } 
]; 

Nhưng làm thế nào tôi có thể áp dụng tốt nhất một resolver để chạy trên, ví dụ, tôi app.component.ts? Có lẽ khi trang web tải lần đầu tiên, không có vấn đề gì trang nào được tải lần đầu tiên, tôi sẽ luôn cần lấy dữ liệu người dùng trước (ví dụ). Vậy làm cách nào để tôi có trình phân giải này áp dụng hạ thấp phân cấp tuyến đường?

Answer 1

Tôi đã tự hỏi về điều tương tự.

Chỉ ra rằng nếu yêu cầu ban đầu cho trang web là đường dẫn có một trong các thành phần được bảo vệ bởi một giải pháp, giải pháp sẽ chạy trước khi bất kỳ thành phần trong cây được khởi tạo. Bao gồm AppComponent.

Bây giờ vấn đề là bản thân AppComponent KHÔNG phải là thành phần được định tuyến và vì vậy nó không thể truy cập dữ liệu được giải quyết. Có thể bạn có thể tiêm ActivatedRoute vào AppComponent và truy cập dữ liệu qua tuyến đường hiện tại children nhưng có vẻ như bị tấn công.

Điều tôi thường làm là thiết lập giải pháp (hoặc bảo vệ CanActivate) tại gốc của phân cấp tuyến đường của tôi để tìm nạp dữ liệu ban đầu đó. Bản thân dữ liệu được trả về bởi một dịch vụ và được bao bọc bên trong một ReplaySubject. Điều này đảm bảo rằng 1) dữ liệu sẽ được chia sẻ giữa tất cả các thuê bao; 2) mã tìm nạp dữ liệu sẽ chỉ được thực hiện một lần.

Nói cách khác:

• tôi sử dụng một thể quan sát được để lấy dữ liệu async một lần và chia sẻ nó giữa tất cả các bộ phận của ứng dụng của tôi cần nó.
• Tôi dựa vào hệ thống định tuyến để kích hoạt việc thực thi có thể quan sát càng sớm càng tốt trong vòng đời của ứng dụng.

(Nhưng tôi không sử dụng các hệ thống tuyến đường để lấy dữ liệu và chia sẻ nó.)

Update để trả lời các ý kiến:

Bạn cần phải giới thiệu một con đường cha mẹ giả để hỗ trợ bảo vệ, ví dụ:

const routes: Routes = [ 
    { 
    path: '', // This is the "root route" 
    component: PageShellComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     { path: 'home', component: PageHomeComponent }, 
     { path: 'inbox', component: PageInboxComponent }, 
     { path: 'settings', component: PageSettingsComponent } 
    ] 
    }, 
]; 

tuyến cha mẹ là "thư mục gốc của hệ thống phân cấp tuyến đường của tôi" và bảo vệ nó AuthGuard được thực hiện cho TẤT CẢ chil d tuyến đường trong ứng dụng. Như bạn có thể thấy, tuyến đường chính có đường dẫn trống và mẫu của PageShellComponent chỉ chứa <router-outlet></router-outlet>. Mục đích duy nhất của tuyến đường này là để hỗ trợ (các) bảo vệ.

Tôi nên thêm nó không cảm thấy rất thành ngữ và tôi không chắc đây là cách tốt nhất để đi.