工作第一个有角度的应用程序（7号角），这是一个缓慢的过程。显示响应式导航栏，并且ngx-mapbox映射是主屏幕。应用程序将用于跟踪资产在地图上移动时的状态。尝试使“设置”组件显示在地图顶部，以便用户可以配置一些常用的首选项。但是该组件不显示。当我单击设置图标时，它会更改颜色以显示其活动状态，因此我知道很多工作正常，但是未显示该组件，也不会生成任何错误。使用Augury查看路由树，它将组件显示为路由树的一部分。 层次结构如下： 应用- -地图（默认显示） -设置（显示在地图顶部） -关于（显示在地图顶部） -登录/注销（将用于Azure身份验证的开放式表单） -并在我开发时添加其他人
这是app.component.html：
{message}Navbar html如下：
<app-navbar >
<app-map></app-map>
<router-outlet></router-outlet>
</app-navbar>
地图非常简单：
<div style="height: 100vh;">
<mat-toolbar color="primary">
<span class="lg-view" fxHide.lt-md>
<b class="cawg">CAWG</b>
<b class="cawg-header">T</b><span class="cawg-text">racking and </span>
<b class="cawg-header">R</b><span class="cawg-text">emote </span>
<b class="cawg-header">A</b><span class="cawg-text">ircraft </span>
<b class="cawg-header">C</b><span class="cawg-text">ommunication </span>
<b class="cawg-header">S</b><span class="cawg-text">ystem (TRACS) </span>
<span class="cawg-text">3.0</span>
</span>
<span class="sm-view" fxHide.gt-sm>
<b class="cawg-text">TRACS3</b>
</span>
<span class="flex-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<mat-icon>airplanemode_active</mat-icon>
<span>Real-time Tracking</span>
</button>
<button mat-menu-item>
<mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
<span>Historical Tracking</span>
</button>
<button mat-menu-item>
<mat-icon>grid_on</mat-icon>
<span>Display Grids</span>
</button>
<button mat-menu-item>
<mat-icon>airplanemode_inactive</mat-icon>
<span>Stop Tracking</span>
</button>
<button mat-menu-item>
<mat-icon>grid_off</mat-icon>
<span>Grids Off</span>
</button>
</mat-menu>
<button mat-icon-button class="d-none d-sm-inline">
<a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
</button>
<button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
<mat-icon>chat_bubble_outline</mat-icon>
</button>
<button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
<mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button routerLink="about" class="d-none d-sm-inline">
<mat-icon>info</mat-icon>
</button>
<button mat-button routerLink="login" class="nav-button">
Sign In
</button>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<mat-nav-list>
<mat-list-item >
<mat-icon>airplanemode_active</mat-icon>
<a matLine href="#" >Real-Time Tracking</a>
</mat-list-item>
<mat-list-item >
<mat-icon svgIcon="historical-tracking-black-48" style="color: black;"></mat-icon>
<a matLine href="#" >Historical Tracking</a>
</mat-list-item>
<mat-list-item >
<mat-icon>grid_on</mat-icon>
<a matLine href="#" >Display Grids</a>
</mat-list-item>
<mat-list-item >
<mat-icon>airplanemode_inactive</mat-icon>
<a matLine href="#" >Stop Tracking</a>
</mat-list-item>
<mat-list-item >
<mat-icon>grid_off</mat-icon>
<a matLine href="#" >Grids Off</a>
</mat-list-item>
<mat-list-item>
<mat-icon>settings</mat-icon>
<a matLine routerLink="settings" >Settings</a>
</mat-list-item>
<mat-list-item>
<mat-icon>chat_bubble_outline</mat-icon>
<a matLine href="#" >Toggle Chat Window</a>
</mat-list-item>
<mat-list-item>
<mat-icon>bug_report</mat-icon>
<a matLine href="#" >Report Issue</a>
</mat-list-item>
<mat-list-item>
<mat-icon>info</mat-icon>
<a matLine href="#" >About</a>
</mat-list-item>
<mat-list-item>
<a matLine href="#" >Sign In</a>
</mat-list-item>
</mat-nav-list>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill><ng-content></ng-content>></mat-sidenav-content>
</mat-sidenav-container>
</div>
app-routing.module.ts：
<div fxFlexFill class="map">
<mgl-map
[style]="'mapbox://styles/mapbox/outdoors-v9'"
[zoom]="9"
[center]="_center"
(load)="loadMap($event)"
>
</mgl-map>
</div>
routes.ts：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
import { SettingsContainerComponent } from '../components/settings- container/settings-container.component';
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes, { enableTracing: true }),
CommonModule,
SettingsContainerComponent
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
设置目前仅是一个占位符。 settins-container.component.html：
import { Routes } from '@angular/router';
import { DisplayMapComponent } from '../components/map/map.component';
import { SettingsContainerComponent } from '../components/settings- container/settings-container.component';
export const routes: Routes = [
{
path: 'map',
pathMatch: 'full',
component: DisplayMapComponent,
},
{
path: 'settings',
pathMatch: 'full',
component: SettingsContainerComponent,
data: { title: 'Settings' }
}
]
和settings-container.component.ts：
<div fxFlexFill class="settigns-container">
<h1>{{title}}</h1>
</div>>
如果将选择器移动到导航栏中的地图上方，则设置组件将显示在地图上方，但这不是我想要的。我希望设置（和其他组件）在调用时覆盖地图。我该如何放大呢？
谢谢.....