Я новичок в angular2. Я хочу, чтобы выполнить задачу, в которой у меня есть разные колонтитулы на разных страницах, но не знаю, как сделать это с помощьюУгловая 2 Маршрутизация
<router-outlet></router-outlet>
как маршрутизатора-выхода просто заменить компонент этого маршрута. Так что лучший способ получить это. Я много искал, но нашел жалкое решение, которое вызывает заголовок/нижний колонтитул в каждом отдельном компоненте.
Благодаря
Ответ зависит от ваших требований: Если заголовок/колонтитул является статическим, но отличается для некоторых частей вашего приложения вы можете использовать вложенные маршрутизации с компонентом маршрутизатором. Родительский маршрут определяет макет заголовка/нижнего колонтитула, childrout - фактическое содержимое.
Если есть больше логики, то f.e. вам нужно определить контент более динамичным способом, чтобы вы могли создавать специальные компоненты для верхнего и нижнего колонтитула, которые определяют контент с помощью службы. (Например, когда ваш пользователь зарегистрировался против анонимного доступа.)
Это действительно просто для достижения вашей задачи. Не добавляйте ничего в файл HTML, в котором вы используете самый верхний маршрутизатор. Теперь каждая страница, которую вы загрузите в родительском маршрутизаторе, будет охватывать всю страницу, чтобы вы могли проектировать каждое представление в соответствии с вашим требованием.
Если кому-то нужно что-то общее во всем приложении, поместите эти общие элементы в один и тот же файл, который содержит ваш самый лучший маршрутизатор-выход.
В этом случае не сохраняйте верхний и нижний колонтитулы в родительском представлении. Сделайте вид и позвоните ему домой. держите нижний колонтитул и заголовок в этом представлении и один роутер-выход и загружайте все компоненты только в этом режиме. сделать другой вид и назовите его логин и нагрузки в соответствии с вашими требованиями на верхнем уровне родительского вида
--APP(main)
|--MAIN (parent container)
|--HOME (will contain all view)
|--CHILD (parent will be home)
|--LOGIN (Parent Will be main)
Дело в том, что в какой-то части я не хочу, чтобы верхний/нижний колонтитул только страницы для входа в систему. После входа пользователя в систему, чем мы можем добавить заголовок/нижний колонтитул. –
Я предлагаю использовать условный рендеринг с * ngIf для этого сценария. Вы можете использовать AuthService, который обеспечивает требуемое состояние, и использовать * ngIf в своем верхнем и нижнем колонтитуле. – Thomas
Конкретно, у меня есть модуль let say auth, в котором у меня есть три страницы (вход, регистрация, забытый). Я определил маршрутизацию в этом модуле. Итак, теперь, когда пользователь посещает какой-то другой URL-адрес, скажем, abc.com/xyz, который отличается от этих 3-х страниц (login/signup/forget-pass), я хочу переместить маршрутизацию в этот модуль, в котором есть компонент xyz, и оставить auth модуль. –