我已经使用延迟加载嵌套了一些路由,但仅显示/路由中默认嵌套路由的组件

问题描述 投票:0回答:1
angular angular-routing angular-module
1个回答
0
投票

实际上共享的代码没有任何重大问题,我认为问题可能出在根组件级别,请检查下面的 stackblitz 以供参考,如果仍然遇到问题,请分享回 stackblitz 并复制问题和详细信息需要修复什么!

主页组件!

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';
import { MatDividerModule } from '@angular/material/divider';

@Component({
  selector: 'app-home',
  template: `<header>
  <div>
   <h1>CommunityPost</h1>
  </div>
  <button mat-raised-button color="primary" (click)="onLogout()">Log Out</button>
 </header>
 <mat-divider></mat-divider>
 <main>
  <nav mat-tab-nav-bar  [tabPanel]="tabPanel">
   <a mat-tab-link routerLink="/users" (click)="activeLink = '/users'" 
    [active]="activeLink == '/users'" > COMMUNITY</a>
   <a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'" 
    [active]="activeLink == '/posts'" > POSTS </a>
  </nav>
  <mat-tab-nav-panel #tabPanel>
   <router-outlet></router-outlet>
  </mat-tab-nav-panel>
 </main>`,
  standalone: true,
  imports: [RouterModule, CommonModule, MatTabsModule, MatDividerModule],
})
export class HomeComponent implements OnInit {
  activeLink = '';
  constructor() {}

  ngOnInit() {}

  onLogout() {}
}

Stackblitz Demo

© www.soinside.com 2019 - 2024. All rights reserved.