홈>
앵귤러 머티리얼 탭을 사용하고 싶습니다 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
관련 자료
- Angular Material Mat-Select 변경 이벤트를 어떻게 구현합니까?
- Missing associated label in Angular material mat form field - Angular material mat-form-field에 관련 레이블이 없습니다WebStorm
- 각도 재질 체크 박스 기반 다음 섹션 가시성 제어 문제
- 각도 재질 목록에서 헤더가있는 항목 제거
- 각도 재질 - 이 비동기 데이터와 작동하지 않습니다
- 각도 재료 확장 패널, 버튼 클릭시에만 확장
- Angular Material Mat-Datapicker와 함께 Angular FormBuilder를 사용하는 방법
- datatable - HTML 테이블을 각도 재질 데이터 테이블로 변환하는 방법
- 여러 색상을 사용하는 각도 재질 다중 진행 막대
- Angular Material Tables에 현재 표시된 데이터를 구독하는 방법
- Angular Material CSS로 mat-form-field-hide-placeholder 동작을 재정의하는 방법
- angular6 - Angular 6 이상에서 systemjs를 어떻게 구현합니까?
- 빈 행을 표시하는 각도 재질 테이블
- input - 각도 재질 날짜 선택기 위치
- html - 각도 재질에서 처음으로 작동하지 않음
- 앵귤러 재질 다이내믹 라디오 버튼은 여러 개를 선택할 수 있지만 그룹에서 한 번만 허용해야합니다
- mat tab - 해당 탭의 내용에서 양식 제출을 기반으로 각도 재료 탭을 전환하는 방법이 있습니까?
- html - 앵귤러 머티리얼 진행 바 - 텍스트가있는 움직이는 div로 재 작업
- javascript - 각도 재질 드롭 다운에서 블러를 비활성화하는 방법
- javascript - 페이지로드에 각도 재질 진행률 표시 줄 사용
관련 질문
- angular : 각도 재질-입력 후 입력 밑줄 색상 변경
- angular : Afterclosed 이벤트에 가입 한 후 재료 테이블이 항상 새로 고쳐지는 것은 아닙니다.
- angular : 재료 입력 제어를 마스킹하는 방법이 있습니까?
- Angular 5에서 mat-datepicker를 지우는 방법
- angular4 앱의 해시 위치 전략
- angular : 페이지 새로 고침 후 사용자를 각도로 동일한 페이지에 유지
- angular : 각도에서 라우터를 확장 할 수 있습니까?
- javascript : 구성 요소가 처음로드 될 때 mat-grid-list의 열 수 변경
- html : Mat-tab (Angular Material &Angular 10, Bootstrap)에서 수평 스크롤바를 제거하는 방법은 무엇입니까?
- Angular Material 메뉴 모듈 : 'matMenu'이름 내보내기를 찾을 수 없습니다.
내 이해가 옳다면 게으른로드 된 모듈의 구성 요소를 탐색하고 싶습니다.
이를 위해 나는 스택 블리츠를 만들었다. 이것은 당신에게 유용 할 것이다.
이해를위한 기본 코드는 다음과 같습니다
ts
스택 블리츠 도움이 되길 바랍니다!