Бесконечная вложенная маршрутизация в Angular2

Question

Я пытаюсь выполнить приложение File Explorer в Angular2.

Мой домашний компонент будет иметь список папок и файлов. Если я нажимаю на «Некоторая папка» в списке, то с помощью имени «Перемещенная папка» в качестве строки запроса я должен перейти к другому компоненту, который снова имеет список дополнительных папок и файлов внутри него, и это может продолжаться для некоторых более вложенных уровней. Я хочу, чтобы путь каждой открытой папки, чтобы быть видимыми в адресной строке (т.е. ./Folder1/Folder1.1/Folder1.1.2...so на.)

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

Может кто-нибудь, пожалуйста, помогите мне в достижении этой цели, потому что с компонент не может использоваться как в представлении, так и в роутере, я затрудняюсь в достижении этого, потому что это почти бесконечное вложение не допускается.

Answer 1

Есть ли причина, по которой на каждом щелчке вам нужно перейти к отдельному виду? Не проще ли просто обновить текущее представление с помощью некоторого типа загрузочной палитры, представляющей ваш обход файловой системы?

Как вы сказали, вы всегда можете сделать что-то подобное.

Настройка вашего пути с @RouteConfig:

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

Пример того, как можно передать имя реж как URL-адрес: PARAM

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

Затем в конструкторе DirComponent вы можете получить что параметр:

constructor(private params: RouteParams) { 

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

Основная концепция заключается в том, что в вашем основном компоненте вы могли бы pas s имя каталога и передать его другому маршруту в качестве параметра url.

Еще раз хочу предложить переосмыслить, почему вам нужен отдельный маршрут для каждого обхода каталога, но это должно дать вам один вариант для передачи информации между компонентами.

Я бы также предложил изучить данные между родительскими/дочерними компонентами. Это может быть другой вариант, если вам нужны данные, доступные для нескольких компонентов.