Я работаю с угловым2 rc1. Я работаю над простой игрой, которая начинается с экрана меню, и при нажатии на кнопку меню я хотел бы перейти к другому виду, вместо текущего вида. Затем я хотел бы вернуться назад с помощью кнопки «Назад».Angular2: Скрыть текущий вид при маршрутизации на другой вид

Это, по-видимому, простое требование, однако, все образцы маршрутизации, которые я вижу, используя маршрутизатор-выход , добавьте в текущее представление вместо его замены. например

<h1>Component Router</h1> 
<nav> 
    <a [routerLink]="['/crisis-center']">Crisis Center</a> 
    <a [routerLink]="['/heroes']">Heroes</a> 
</nav> 
<router-outlet></router-outlet>

Эта разметка добавляет новый вид под </nav> элемента.

Я пропустил что-то очевидное? Есть ли простой способ сделать это или мне нужно использовать <router-outlet> в сочетании с *ngIf, чтобы скрыть текущий вид?

источник

2016-05-07 Jeffry van de Vuurst

, что вы на самом деле хотите, чтобы скрыть? я не понимаю, что вы хотите сделать? –

Я хочу, чтобы скрыть текущую точку зрения, поэтому в данном случае '

компонент Маршрутизатор

' –

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

<nav> 
    <a routerLink="/dashboard">Dashboard</a> 
    <a routerLink="/search">Search</a> 
</nav> 

<div class="loading-overlay" *ngIf="loading">Cargando...</div> 

<div [style.display]="loading ? 'none' : 'block'"> 
    <router-outlet></router-outlet> 
</div>

И в app.component у меня есть этот код (кредита на @borislemke в this response):

public loading: boolean = true; 

constructor(private router: Router) { } 

ngOnInit() { 
    this.router.events.subscribe((event: any): void => { 
    this.navigationInterceptor(event); 
    }); 
} 

navigationInterceptor(event): void { 
    if(event instanceof NavigationStart) { 
    this.loading = true; 
    } 
    if(event instanceof NavigationEnd) { 
    this.loading = false; 
    } 
}

источник

2016-10-07 12:43:58 Dunos

Я бы рекомендовал добавить '|| event instanceof NavigationCancel || event instanceof NavigationError 'в эту секунду, если, чтобы избежать случая с краем, никогда не заканчивающегося загрузки. – Sam

Да, я также использовал это позже, @Sam прямо там – Dunos

Я не думаю, что есть другой способ сделать это, вам нужно использовать * ngIf.

То, что вы пытаетесь достичь, - это не общий шаблон (обычный шаблон должен иметь навигационное меню и меню содержимого), но это может иметь смысл для игры, как вы сказали.

источник

2016-05-07 12:11:02 tibbus

Angular2: Скрыть текущий вид при маршрутизации на другой вид

компонент Маршрутизатор

ответ

Смежные вопросы