angular - 保存子组件后Angular8 UI页面不起作用

Question

我创建了 angular8 项目并添加了一个子组件“main-nav”并作为属性添加到 app.component.html 中。如果我对子组件进行了一些更改并单击保存，则子组件相关的 UI 无法使用 CSS。每次我停止终端并执行 ng serve 时，UI 都可以正常工作。我是角度的新手。请帮助我解决问题。

我的输出是这样的 [输出][1] 如果我保存我的更改然后得到这样的输出 [错误输出][2]

这是我的代码

app.component.html
-----------------
<main-nav>
  <button>test</button>
</main-nav>

app.component.ts
----------------
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(){}
}

app.module.ts
------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';



@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

main-nav.component.html
-----------------------
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" 
  >
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
  <a mat-list-item href="#">Main</a>
  <a mat-list-item href="#">Banking</a>
  <a mat-list-item href="#">Reporting</a>
</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    >
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span>Application</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

main-nav.component.ts
-----------------------
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.scss']
    })
export class MainNavComponent implements OnInit{

      constructor() { }

             ngOnInit() {
          }
        }

      [1]: https://i.stack.imgur.com/PzD3t.png
      [2]: https://i.stack.imgur.com/Ked7w.png})

标签： angulartypescriptangular8