Bir alt rotadan bir ana rotaya nasıl giderim?

Benim sorunum oldukça klasik. Bir uygulamanın arkasında bir login form. Giriş başarılı olduğunda, yönetici uygulaması için bir alt rotaya gider.

Benim sorunum, global navigation menuyönlendirici benim AdminComponentyerine benim yönlendirmeye çalıştığı için kullanamıyorum AppCompoment. Yani navigasyonum bozuk.

Diğer bir sorun da, birisi URL'ye doğrudan erişmek isterse, ana "giriş" yoluna yeniden yönlendirmek istememdir. Ama çalışmasını sağlayamam. Bana öyle geliyor ki bu iki konu birbirine benziyor.

Nasıl yapılabileceği hakkında bir fikriniz var mı?

Bir bağlantı / HTML mi istiyorsunuz yoksa zorunlu olarak / kod içinde mi yönlendirmek istiyorsunuz?

Bağlantı : RouterLink yönergesi, sağlanan bağlantıyı her zaman geçerli URL'ye bir delta olarak ele alır:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

RouterLink ile, directivesdiziyi içe aktarmayı ve kullanmayı unutmayın :

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

Zorunlu : navigate()Yöntem bir başlangıç ​​noktası (yani relativeToparametre) gerektirir. Hiçbiri sağlanmadıysa, gezinme mutlaktır:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

Bu, 2017 İlkbaharından itibaren benim için işe yarıyor gibi görünüyor:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

Bileşen ctor'unuzun kabul ettiği ActivatedRouteve Routeraşağıdaki gibi ithal edildiği yer:

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

Bunun gibi ana köküne gidebilirsin

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

Yapıcıya mevcut aktif Rotayı enjekte etmeniz gerekecek

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

Yönlendirici destekler

• mutlak yollar /xxx- kök bileşenin yönlendiricisinde başlatıldı
• göreli yollar xxx- mevcut bileşenin yönlendiricisinde başlatıldı
• göreli yollar ../xxx- mevcut bileşenin üst yönlendiricisinde başlatılır

Geçerli rotadaki veya ana rotadaki parametre sayısından bağımsız olarak üst bileşene gitmek için : Angular 6 güncelleme 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

Bu, singleton Router ile kullanabileceğiniz mutlak bir rota olma ek avantajına sahiptir.

(Kesinlikle Açısal 4+, muhtemelen Açısal 2 de.)

Başka bir yol böyle olabilir

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

ve işte kurucu

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

çok uzatmadan:

this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});

'..' parametresi gezinmeyi bir seviye yukarı yapar, yani ana :)

Rotalarımın şuna benzer bir düzeni var:

• kullanıcı / düzenle / 1 -> Düzenle
• kullanıcı / oluştur / 0 -> Oluştur
• kullanıcı / -> Liste

Örneğin, Düzenleme sayfasındayken ve liste sayfasına geri dönmem gerektiğinde, rotada 2 seviye yukarı döneceğim.

Bunu düşünerek yöntemimi bir "level" parametresi ile oluşturdum.

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

Yani, düzenlemeden listeye gitmek için şu yöntemi çağırıyorum:

this.goBack(2);

UiSref direktifini kullanıyorsanız, bunu yapabilirsiniz

uiSref="^"

Benim çözümüm:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

Ve Routerenjeksiyon:

private readonly _router: Router

Bunların hiçbiri benim için işe yaramadı ... Kullanmam gerekiyordu:

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

private router: Router

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

kurucunuza şuradan Konum ekleyin: @angular/common

constructor(private _location: Location) {}

geri işlevi ekleyin:

back() {
  this._location.back();
}

ve sonra sizin görüşünüzde:

<button class="btn" (click)="back()">Back</button>