>

앵귤러 머티리얼 탭을 사용하고 싶습니다 https://material.angular.io/components/tabs 탭에서 라우터 탐색 기능을 사용하십시오.

<nav mat-tab-nav-bar> 를 사용하려고했습니다.  문서에 표시된대로 https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/ 그런 템플릿을 찾을 수있는 곳 :

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of navLinks"
    [routerLink]="link.link"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
<router-outlet></router-outlet>

그러나 문제는 내 탭이 내 응용 프로그램의 루트가 아니라 하위 경로의 하위 모듈에 있다는 것입니다. 나는 다음과 같은 것을 가지고있다 :

앱 라우팅 모듈 :

const routes: Routes = [
  ...
  { path: 'subpath', loadChildren: () => import('./path-to-module/submodule.module').then(m => m.SubmoduleModule) },
  ...
];

서브 모듈 라우팅 모듈에는 다음과 같은 내용이 있어야합니다 :

const routes: Routes = [
  { path: '', component: FirstTabComponent },
  { path: 'tab2', component: SecondTabComponent },
]

URL /subpath 로 이동하면  첫 번째 탭이 선택된 탭이 표시되고 URL /subpath/tab2 로 이동하면  두 번째 탭이 선택된 탭이 표시됩니다.

어떻게해야할까요?


  • 답변 # 1

    내 이해가 옳다면 게으른로드 된 모듈의 구성 요소를 탐색하고 싶습니다.

    이를 위해 나는 스택 블리츠를 만들었다. 이것은 당신에게 유용 할 것이다.

    이해를위한 기본 코드는 다음과 같습니다

    <nav mat-tab-nav-bar class="mat-elevation-z8" >
      <a
        mat-tab-link
        *ngFor="let link of navLinks"
        routerLink="{{ link.location }}"
        routerLinkActive
        #rla="routerLinkActive"
        [active]="rla.isActive"
      >
        <mat-icon>{{ link.icon }}</mat-icon>
        <span>{{ link.label | uppercase }}</span>
      </a>
    </nav>
    
    

    ts

    navLinks = [
        {location:'',label:'dummy',icon:'menu'},
        { location: '/shared', label: 'Overview', icon: 'account_circle' },
        { location: '/shared/sub', label: 'Experience', icon: 'work' }
      ];
    
    

    스택 블리츠 도움이 되길 바랍니다!

관련 자료

  • 이전 sql - null이 아닌 열 그룹을 선택해야합니다
  • 다음 python - 이 코드를 컴파일하고 실행할 때마다 "여기에 멋진 기능이 있습니다!"라는 콘솔로 인쇄되는 유일한 이유는 확실하지 않습니다