Скрыть элемент на основе маршрута в Angular 5,6 - PullRequest
Новая
       6

Скрыть элемент на основе маршрута в Angular 5,6

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

Я сейчас управляю проектом Angular и столкнулся с любопытной вещью, пытаясь улучшить систему.Некоторые элементы не должны отображаться на определенных URL.

Есть ли способ скрыть элемент, основанный на URL в Angular 5 или 6?

Я хочу узнать о наилучшем опыте для достижения этой цели.

Например, domain.com/home, domain.com/package и т. Д.

1 Ответ

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

В угловых мы обычно создаем все меньше и меньше директив, так как составляющие опоры в 90% случаев.Но вот типичный случай, когда вам нужно его создать:).

1 - Создать директиву en Inject the router: 

 import { ActivatedRoute } from '@angular/router';

 @Input() url : string;

 constructore(private router: Router){
   router.events.subscribe( (event) => {
     // I think you can see the route change here :)
   });
 }

Отсюда вы сможете узнать, на какоммаршрут вы.

2 - теперь скрывать или нет?

Вы также можете ввести templateRef и containerRef для игры с DOM. 

 import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

 constructore(private route: Router,
              private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef){
 }

3 - Для завершения: 

    if (this.url // On a good URL show the content) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

4 - Вам просто нужно добавить эту директиву к элементу, которым вы хотите управлять

...