angular - 放大 Angular Auth 材质图标未在组件激活时呈现

Question

我正在尝试使用 Amplify Angular UI Auth 组件，但是当我通过路由导航以从 Amplify Auth 组件激活我的下一个组件“/home”时，我的 Angular Material Icons 显示的是文本而不是图标。但是，一旦在组件上，如果我刷新 /home 页面，就会出现图标。如果我通过直接导航到它来激活路线。因此，例如，我直接转到 /home 图标也会显示。只有当我从放大 ui 组件导航时才会显示文本。

因此，简而言之，我只是使用 amplify ui 组件进行身份验证，然后从该组件路由到 /home 组件。

这是我的设置：

应用程序路由模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';


const routes: Routes = [{
  path: "home",
  component: HomeComponent,
},
{
  path: "login",
  component: AuthComponent
},
{
  path: '**',
  redirectTo: 'login',
  pathMatch: 'full'
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

auth.component.html

<amplify-authenticator>
    <amplify-sign-up slot="sign-up" usernameAlias="email" ></amplify-sign-up>
</amplify-authenticator>

auth.component.ts - 这是我成功登录后用户路由的地方

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {

  constructor(public amplifyService: AmplifyService, public router: Router) {

    this.amplifyService = amplifyService;

    this.amplifyService.authStateChange$
      .subscribe(authState => {
        console.log("Signed IN ");
        if (authState.state === 'signedIn') {
          console.log("Navigating to home");

          this.router.navigate(['/home']);
        }
      });

  }
  ngOnInit(): void {
  }
}

home.component.html - 我在哪里显示一个垫子图标

<p>home works!</p>
<mat-icon aria-hidden="false">home</mat-icon>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { AmplifyService } from 'aws-amplify-angular'


/* Add Amplify imports */
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    MatIconModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    AmplifyUIAngularModule
  ],
  providers: [AmplifyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

main.ts - 这是配置放大的地方。不确定这是否起作用

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import Amplify from 'aws-amplify';
import amplify from './aws-exports';

Amplify.configure(amplify);

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

styles.css - 不确定问题是否在这里

/* You can add global styles to this file, and also import other style files */
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

/* Used to customize amplify colors */
:root {
    --amplify-primary-color: #263238;
    --amplify-primary-tint: #8c7339;
    --amplify-primary-shade: #8c7339;
  }

我是否可能有一些乱序的导入导致图标无法立即呈现？我不知道，被困在这几个小时了。它可能与模块和路由有关吗？

标签： angularangular-materialaws-amplifyamplifyjs