Угловой 6: панель инструментов mat и строка строки mat-toolbar в компоненте нижнего колонтитула (общего доступа) отображаются неправильно (но без ошибок)? - PullRequest
Новая
       7

Угловой 6: панель инструментов mat и строка строки mat-toolbar в компоненте нижнего колонтитула (общего доступа) отображаются неправильно (но без ошибок)?

0 голосов
/ 02 сентября 2018

Я прочитал все подобные вопросы, когда писал этот пост, но не смог найти решение в этом списке.

Я искал по следующим ссылкам, но не смог найти решение:

Угловой материал v6 Mat-Footer - "Не удается прочитать свойство 'шаблон' из неопределенного"

Угловой 6 мат-футер без прокрутки страницы

Угловой 6 'mat-button-toggle' не известен элемент

'mat-toolbar' - неизвестный элемент - Угловой 5

Как назначить элемент строки md-toolbar-row на панели инструментов md

Элементы управления матом работают нормально на компонентах, но кроме компонента нижнего колонтитула Я пытаюсь использовать Mat-toolbar и mat-toolbar-row в моем компоненте нижнего колонтитула страницы. Я не знаю, почему панель инструментов не отображается должным образом. Сначала я получил это исключение.

Uncaught Error: Ошибки разбора шаблона: 'mat-toolbar-row' не является известным элементом: 1. Если 'mat-toolbar-row' является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если 'mat-toolbar-row' является веб-компонентом, то добавьте '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-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>

Кроме того, я импортировал MaterialModule в Shared.module.ts, а общий модуль импортируется в app.module.ts.

Я вызываю этот нижний колонтитул на App.Component.html, и панель инструментов mat отлично работает на 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);
        }
    }
}

Я хочу отобразить этот пример как есть: смотрите через этот URL: https://material.angular.io/components/toolbar/examples

1 Ответ

0 голосов
/ 08 сентября 2018

Это потому, что вы должны импортировать необходимые модули, которые используются компонентами в вашем пользовательском модуле! Смотрите ниже: 

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