Угловая навигация Mat-Tab-Group с routerLink

Мой URL-адрес localhost: port / home, когда я нажимаю на вкладку коврика, я хочу настроить URL-адрес на home / secondTab, home / thirdTab или home / firstTab. Я ожидал этого с такой настройкой, но это не работает.

Я хочу построить маршрут с целью, когда я сообщаю маршрутизатору router.navigate (['home / secondTab'], он загружает homecomponent и secondTabComponent, а пользователи заполняют второйTab в фокусе.

Ни один из дочерних маршрутов (home / secondTab), похоже, не работает, URL-адрес никогда не обновляется при нажатии, и когда я сам набираю URL-адрес home / secondTab, загружается HomeComponent. Короче говоря, ничего не работает и не может найти ни одного примера с такой же настройкой, как все используют nav mat + mat-tab-link

Я новичок в интерфейсной разработке, и официальная документация мне не так понятна. Нужен ли мне модуль маршрутизации для каждого компонента? Или я могу сделать их все в маршрутизации приложений в этой настройке? Возможно ли то, что я хочу с имеющейся у меня настройкой, или я что-то упускаю? Спасибо за вклад.

Для тех, кто указывает на nav mat + mat-tab-link, я не могу реорганизовать его таким образом, потому что другие потоки работают таким образом.

home.html

<mat-tab-group (selectedTabChange)="selectedTabChanged($event)" >
    <mat-tab label="FirstTab" >
        <app-FirstTab></app-FirstTab>  
    </mat-tab> 
    <mat-tab label="SecondTab" >
        <app-SecondTab></app-SecondTab>  
    </mat-tab> 
    <mat-tab label="ThirdTab" >
        <app-ThirdTab></app-ThirdTab>  
    </mat-tab> 
</mat-tab-group>

home.ts

selectedTabChanged(event: any){
    if(event.index == 0){ 
      this.Service.refreshTab();        
    }

    if(event.index == 1){ 
        this.Service.makeApiCall();  
    }

    if(event.index == 2){ 
 
    }
}

navigation.html

<div>
    <strong [routerLink]="['home/secondTab']" >
    </strong>
</div>

app-routing.ts

const routes: Routes = [
  Shell.childRoutes([
    { path: '', redirectTo: '/login', pathMatch: 'full' },  //works
    { path: 'home', component: HomeComponent },             //works

    { path: 'home/secondTab', component: SecondTabComponent }   //loads HomeComponent
    //OR        
    { path: 'home/secondTab', component: HomeComponent, loadChildren: () =>
        import ('./home/Second/Second.cmpnt').then(m => m.SecondTabComponent) }
  ])
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class HomeRoutingModule { }

angular url-routing routerlink
person dfbenny    schedule 21.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать что-то подобное. Передайте FirstTab, secondTab или thirdTab через параметр маршрутизатора.

Проверить это

Затем вы можете подписаться на paramMap и написать что-нибудь вроде этого.

<mat-tab-group [(selectedIndex)]="demo1TabIndex" (selectedTabChange)="selectedTabChanged($event)" >
    <mat-tab label="FirstTab" >
        <app-FirstTab></app-FirstTab>  
    </mat-tab> 
    <mat-tab label="SecondTab" >
        <app-SecondTab></app-SecondTab>  
    </mat-tab> 
    <mat-tab label="ThirdTab" >
        <app-ThirdTab></app-ThirdTab>  
    </mat-tab> 
</mat-tab-group>

...

    public demo1TabIndex = 1;

    ngOnInit() {
      this.route.paramMap.subscribe(params => {
        let tabName = params.get('tabn;ame')

    let _index = 1;
 
    if(tabName == 'FirstTab'){
        this.index = 1;
    }

    if(tabName == 'secondTab'){
        this.index = 2;
    }


    if(tabName == 'thirdTab '){
        this.index = 3;
    }

       this.demo1TabIndex = _index;
    }

Я просто даю вам представление и настраиваю код так, как вы хотите.

person Janitha Rasanga    schedule 21.12.2020
comment
спасибо за Ваш ответ. Было интересное видео. У меня все еще есть вопросы по вашему примеру: где передать параметры, на ярлыке mat-tab или с ‹custom-component›. Кроме того, нужен ли ‹router-outlet› для каждой ссылки? Спасибо - person dfbenny; 22.12.2020