Отображение и скрытие содержимого при навигации по меню в Angular 6

Я новичок в Angular. Я реализую веб-проект с использованием среднего стека и Angular 6. Там мне нужно открыть панель, и там есть меню. Я хочу открывать разные html-представления в разных компонентах при щелчке по пунктам меню.

Например, у меня есть панель, которая содержит меню в левой части, это компонент «тире». В этом меню есть пункт под названием «Карты». Когда я нажимаю на пункт меню «Карты», он должен отображать вид html в файле «maps.component.html». Здесь «тире» и «карты» - это два разных компонента.

Что я пробовал.

  1. Определил логическую переменную isMap в файле dash.component.ts. Установите его значение как false в начале.

  2. Изменено значение переменной на "true", когда заголовок элемента равен "Maps"

например:

//Select the relavant view according to the selected menu item
  onContecxtItemSelection(title) {
    if (title == "Maps") {
      this.isMaps=true;
    }
  }
  1. Wrapped the html in maps.component.html using a div and set the 'isMap' variable using an '*ngIf'.

    например:

 <div style = "float: right; " *ngIf = "isMaps">
        <p>Map page</p>
 </div>

Мой первый вопрос:

  1. Когда я нажимаю на пункт меню, он не показывает содержимое maps.component.html Второй вопрос:

  2. Переменная isMaps в maps.component.html показывает следующую ошибку.

Идентификатор [Angular] isMaps не определен. Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена '. Я также попытался импортировать «компонент карт» в файл «dash.component.ts». Но не вышло. Я удалил эту часть.

Переменная isMaps определена в dash.component, поэтому она доступна только в dash.component, но не в maps.component. Подойдет ли маршрутизация для вашего приложения? Если нет, вы можете определить isMaps в общей службе.

user184994 27.10.2018 12:51

Спасибо. Маршрутизация не работает для моего приложения.

rosd 27.10.2018 12:58

@ user184994 следует ли реализовать общую службу как другой компонент?

rosd 27.10.2018 13:23

Не как компонент, нет; это должна быть услуга. Взгляните на angular.io/guide/… для ознакомления с услугами

user184994 27.10.2018 13:25

@ user184994 извините за вопрос еще раз. Не могли бы вы привести пример моего сценария. Мой компонент тире и компоненты карт являются братьями и сестрами. Не родитель и ребенок.

rosd 28.10.2018 03:02

Если вы создадите очень простой пример в StackBlitz с вашими двумя компонентами, я создам вилку, которая демонстрирует, что я имею в виду.

user184994 28.10.2018 07:18

@ user184994 Спасибо. Здесь я создал проект «stackblitz.com/edit/angular-bzkpvz». «Меню» находится в тире, и когда мы перемещаемся по пункту меню «карты», оно должно отображать эту страницу. Пожалуйста, если вы можете помочь.

rosd 28.10.2018 12:25

Компонент dash в настоящий момент не создается (возможно, из-за отсутствия зависимостей)

user184994 28.10.2018 12:32

@ user184994 Я обновил проект

rosd 28.10.2018 13:48

Если да, то не похоже, что вы его сохранили. Я более чем счастлив помочь, но можете ли вы предоставить StackBlitz, который хотя бы строит и, возможно, даже отображает компонент тире?

user184994 28.10.2018 14:05
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
10
280
0

Другие вопросы по теме