Infinite Nested Routing trong Angular2

Question

Tôi cố gắng để Thực hiện một File Explorer App trong Angular2.

My Home Component sẽ có một danh sách các thư mục và tập tin. Nếu tôi nhấp vào một số thư mục trong danh sách, sau đó sử dụng tên của thư mục được nhấp vào làm chuỗi truy vấn, tôi sẽ điều hướng đến một thành phần khác có danh sách thư mục và tệp khác bên trong và điều này có thể tiếp tục cho một số cấp lồng nhau. Tôi muốn con đường mỗi thư mục mở để được hiển thị trong thanh url (tức là ./Folder1/Folder1.1/Folder1.1.2...so trên.)

Folder1 
    Folder1.1 
     Folder1.1.1 
     Folder1.1.2 
    Folder1.2 
Folder2 

Bất cứ ai cũng có thể vui lòng giúp tôi trong việc đạt được điều này bởi vì kể từ thành phần không thể được sử dụng cả dạng xem và bộ định tuyến, tôi thấy khó khăn trong việc đạt được điều này bởi vì việc lồng gần như vô hạn này không được phép.

Answer 1

Có một lý do tại sao trên mỗi nhấp chuột, bạn cần phải đi đến một cái nhìn riêng biệt? Nó sẽ không đơn giản hơn để chỉ cập nhật chế độ xem hiện tại với một số loại đường dẫn khởi động cho thấy sự di chuyển của hệ thống tệp?

đó đang được nói, bạn luôn có thể làm một cái gì đó như thế này.

Thiết lập đường dẫn của bạn với @RouteConfig:

@RouteConfig([ 
    {path:'/', name:'Home', component:HomeComponent}, 
    {path:'/dir/:name', name:'Dir',component:DirComponent} 
]) 

Ví dụ về làm thế nào bạn có thể vượt qua các tên dir như một param url:

<a [routerLink]="['Dir',{name:'MyDirectory'}]">Profile</a> 

Sau đó trong constructor của DirComponent của bạn, bạn có thể nhận được thông số đó:

constructor(private params: RouteParams) { 

      let dirName = params.get('name'); 
} 

Khái niệm cơ bản là trong thành phần chính bạn có thể s tên thư mục và chuyển nó sang một tuyến đường khác dưới dạng thông số url.

Một lần nữa, tôi sẽ đề nghị xem xét lại lý do tại sao bạn cần một lộ trình riêng cho mỗi thư mục traversal, nhưng điều này sẽ cho bạn một lựa chọn cho truyền thông tin giữa các thành phần.

Tôi cũng xin đề nghị xem xét chia sẻ dữ liệu giữa các thành phần phụ huynh/trẻ em. Đó có thể là một tùy chọn khác nếu bạn cần dữ liệu có sẵn cho nhiều thành phần.