Как включить или выключить блок на странице?

Question

[mr_plutus]

День добрый.
Вопрос по второму ангуляру.

Есть главный компонент app.component
В нём шаблон:

<header class="header"></header>
<aside class="aside"></aside>
<router-outlet></router-outlet>

Как на других страницах скрыть aside или header если они там не требуются ?

Answer 1

[antkhnvsk]

В самом шаблоне пропишем ngIf

<header *ngIf="hasHeader" class="header"></header>
<aside *ngIf="hasAside" class="aside"></aside>
<router-outlet></router-outlet>

Слушаем изменения роутера в app.component

import {Router} from '@angular/router';
export class AppComponent {
	hasHeader: boolean = true
	hasAside: boolean = true

	constructor(
		private _router: Router
	) { }

	ngOnInit() {
		this._router.events
			.subscribe(params => {
				let path = params.url.split('/')[1]
				if (path == 'auth') {
					this.hasHeader = false
					this.hasAside = false
				} else {
					this.hasHeader = true
					this.hasAside = true
				}
			})
	}
}

Comments

[mr_plutus]

Суть про ngif понял

Но мне по тругому надо, чуть
У меня страницы это компоненты,
Auth - компонент (роутер /auth) - тут не нужен ни header ни aside
Home - компонент (роутер / ) - тут aside не нужен только header
UsersList - компонент (роутер /users-list ) - тут нужен и header и aside

И так со всеми остальными страницами. На некоторых нужен aside на некоторых нет. Как мне в этих компонентах передать перменную hasHeader и hasAside

[antkhnvsk]

Судя по вашему шаблону, header и aside у вас общие на все приложение, и находятся рядом с router-outlet внутри которого будут находиться конкретные компоненты. Тогда мой код подходит: проверяем текущий компонент в path и меняем this.hasHeader и this.hasAside. Зачем передавать компонентам переменные, которые отвечают за то, что находится снаружи компонентов?

[mr_plutus]

antkhnvsk: Ну впринципе да, просто придётся описывать показ в app а не внутри конкретных компонентов

[antkhnvsk]

Понял. Можно создать отдельный сервис TemplateParts, и хранить hasHeader и hasAside в нем. Инжектить этот сервис во все компоненты, и менять его состояние там где необходимо. При этом в app шаблоне привязаться к переменным этого сервиса *ngIf="_templateParts.hasHeader"