Angular 6：页脚（共享）组件中的 mat-toolbar 和 mat-toolbar-row 显示不正确（但没有任何错误）？

Question

我在写这篇文章时已经阅读了所有类似的问题，但在该列表中找不到解决方案。

我在以下链接中搜索但找不到解决方案：

Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"

Angular 6 mat-table and footer without page scroll

Angular 6 'mat-button-toggle' is not a known element

'mat-toolbar' is not a known element - Angular 5

How to target md-toolbar-row element in md-toolbar

Mat 控件在组件上运行良好，但页脚组件除外。 我正在尝试在我的共享页脚组件中使用 Mat-toolbar 和 mat-toolbar-row。我不知道为什么工具栏没有正确显示。 起初，我遇到了这个异常。

未捕获的错误：模板解析错误： 'mat-toolbar-row' 不是已知元素： 1. 如果“mat-toolbar-row”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“mat-toolbar-row”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 ("

然后我在下面的页脚中添加了 CUSTOM_ELEMENTS_SCHEMA 并且异常消失了。

import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
})
export class Footer
{
    getYear()
    {
        return new Date().getUTCFullYear();
    }
}

@NgModule({
    exports: [Footer],
  declarations: [Footer],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FooterModule { }

现在我在浏览器控制台中没有任何异常，我的应用程序正在运行，但现在不显示 mat-toolbar 和 mat-toolbar-row 元素颜色和图标效果。应用程序只显示原始数据，而不是准确显示。

我的页脚组件是：

    <footer class="app-footer">
  <div class="app-footer-link">
    <p>
      <span>VAA</span> &copy; {{getYear()}}
      <a href="https://www.VAA.com" target="_blank">www.VAA.com</a>
    </p>
  </div>

  <mat-toolbar color="primary">   
    <mat-toolbar-row>
      <span>Custom Toolbar</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
      <span>Second Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">verified_user</mat-icon>
    </mat-toolbar-row>

    <mat-toolbar-row>
      <span>Third Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">favorite</mat-icon>
      <mat-icon class="example-icon">delete</mat-icon>
    </mat-toolbar-row>
  </mat-toolbar>
</footer>

此外，我在 Shared.module.ts 中导入了 MaterialModule，并且在 app.module.ts 中导入了共享模块。

我在 App.Component.html 上调用此页脚，并且 mat-toolbar 在 App.Component.html 上完美运行。

查看 App.Component.html 上的调用。

 <mat-sidenav-content>
      <div fxLayout="column" fxFill>
        <div id="mainContent" fxFlex>
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

这是主题效果逻辑：

   @mixin footer-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    app-footer {
        .app-footer {
            background: mat-color($primary);
            color: mat-color($primary, default-contrast);
        }

        .app-footer-link a {
            color: mat-color($primary, default-contrast);
        }
    }
}

我想按原样显示这个例子： 请看这个网址：https://material.angular.io/components/toolbar/examples

Answer 1

那是因为您必须导入自定义模块中的组件正在使用的必要模块！见下文：

@NgModule({
  imports: [
    CommonModule,
    MatIconModule,
    MatToolbarModule,
    // ...
  ],
  declarations: [
    Footer,
    // ...
  ]
})
export class FooterModule { }