Блог

Главная - Вопросы по программированию - Как заставить mat-toolbar реагировать на изменения в Angular?

Как заставить mat-toolbar реагировать на изменения в Angular?

#html #css #angular

#HTML #css #angular

Вопрос:

Я уже некоторое время пытаюсь создать базовый заголовок для домашней страницы для своего веб-приложения, я хочу использовать mat-toolbar, но он не будет настроен так, как я хочу. Мой код выглядит следующим образом.

 .maintooly {
    background-color: rgba(0,0,0,.7)
}  
 <mat-toolbar color="primary" class="main-tooly">
    <span id="product-name">
        HOMEPAGE
    </span>
    <div class="vertical-line title-line">
        |
    </div>
</mat-toolbar>

Это упрощенный пример, но по сути я пытаюсь добавить заголовок в начало страницы, чтобы он выглядел так:

Чего я хочу

Но вместо этого это выглядит так:

Что я получаю

Итог: не удается заставить элементы в заголовке отображаться рядом друг с другом и не удается изменить цвет заголовка или действительно что-либо сделать.

Что именно я здесь делаю не так и как я могу заставить это работать?

Комментарии:

1. Подсказка: не добавляйте разметку для создания строк. Используйте CSS.

2. Вы импортировали модуль панели инструментов? Не похоже, что он загружен.

3. @isherwood Как и где мне это сделать? Как я могу проверить?

4. @isherwood В angular-material.module.ts у меня есть импорт { MatToolbarModule } из ‘@angular/material/toolbar’;

5. Ну, ваша сборка должна завершиться неудачно и / или у вас должны быть ошибки консоли, если она не загружается.

Ответ №1:

Решение состояло в том, чтобы импортировать инструмент в файл app.module.ts.