Question

我想在单击菜单项，路线链接或超链接后，在Angular 6应用程序sidenav和home组件中显示一个处理微调框。这是HomeComponent和SideNav。我在数据源组件中也有一个微调器，当应用程序连接到webapi服务时，该微调器正在工作。我将代码复制到SideNav和Home中，但未显示。感谢您的帮助。

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  private spinnerSubject = new BehaviorSubject<boolean> (false);
  loading$: Observable<boolean> = this.spinnerSubject.asObservable();
  spinnerColor = 'warn';

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {
    
      activatedRoute.url.subscribe((s: UrlSegment[]) => {

    });
  }

  ngOnInit() {

  }

  appCardClicked(routePath: string) {
    this.spinnerSubject.next(true);
    this.router.navigate([routePath], {
      replaceUrl: true
    });
    // this.spinnerSubject.next(false);
  }
}

<div class="spinner-container">
  <mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>
</div>

<mat-card class="app-card" (click)="appCardClicked('/lccp')">
  <mat-card-content>
    <p>
      A summary goes here.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'vertical-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit, AfterViewInit, AfterContentInit {
  private spinnerSubject = new BehaviorSubject<boolean>(false); 
  loading$: Observable<boolean> = this.spinnerSubject.asObservable();

  routerLinkClicked(): void {
    this.spinnerSubject.next(true);
  }

  ngAfterContentInit(): void {
    this.spinnerSubject.next(false);
  }
}

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">
    <mat-toolbar class="darkNavy">
      <img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />
    </mat-toolbar>
    <mat-nav-list style="padding-top:50px">
      <a *ngFor="let item of verticleMenu" mat-list-item routerLink="{{item.RouteLink}}" (click)="routerLinkClicked()">
        {{item.Title}}
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="darkNavy">
      <mat-nav-list>
        <div class='menu' style="display:flex; align-items: flex-end">
          <i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu

          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </i>
          <span *ngFor="let item of horizontalMenu" mat-list-item routerLink="{{item.RouteLink}}">&nbsp;
            {{item.Title}}
          </span>
        </div>
      </mat-nav-list>
    </mat-toolbar>

    <ng-content>
      <!-- routed content is projected here -->
    </ng-content>
    <div class="spinner-container" *ngIf="loading$ | async" role="presentation">
      <mat-spinner [color]="spinnerColor"></mat-spinner>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

我在nav.component.htm中的ng-content之后添加了DIV。导航组件中的微调器正在显示。我还做了router.events.subscribe（）并检查了事件类型以打开和关闭微调器。但是，Home组件中的微调框永远不会显示。

Angular 6如何在菜单项或超链接上显示微调器

1 个答案: