Làm thế nào để có được tuyến đường hiện tại

Các tài liệu hiện tại chỉ nói về việc nhận thông số tuyến đường, không phải các phân đoạn tuyến thực tế.

Ví dụ, nếu tôi muốn tìm cha mẹ của tuyến đường hiện tại, làm thế nào là có thể?

Bộ định tuyến V3 mới có thuộc tính url.

this.router.url === '/login'

RC4 góc:

Bạn có thể nhập Routertừ@angular/router

Sau đó tiêm nó:

constructor(private router: Router ) {

}

Sau đó gọi tham số URL của nó:

console.log(this.router.url); //  /routename

Tiêm Locationvào thành phần của bạn và đọc location.path(); Bạn cần thêm ROUTER_DIRECTIVESmột nơi nào đó để Angular có thể giải quyết Location. Bạn cần thêm import: [RouterModule]vào mô-đun.

Cập nhật

Trong bộ định tuyến V3 (RC.3), bạn có thể thêm ActivatedRoutevà truy cập nhiều chi tiết hơn bằng cách sử dụng thuộc tính của nó snapshot.

constructor(private route:ActivatedRoute) {
  console.log(route);
}

hoặc là

constructor(private router:Router) {
  router.events.subscribe(...);
}

Xem thêm Trình nghe sự kiện của bộ định tuyến Angular 2

cho bộ định tuyến mới> = RC.3

Tốt nhất và một cách đơn giản để làm điều này là!

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  // to print only path eg:"/login"
}

Dùng cái này

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

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

Và trong main.tsnhập khẩu

import 'rxjs/add/operator/filter';

BIÊN TẬP

Cách hiện đại

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

Đối với những người vẫn đang tìm kiếm này. Trên Angular 2.x có một vài cách để làm điều đó.

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

   // string path from root to current route. i.e /Root/CurrentRoute
   router.url 

    // just the fragment of the current route. i.e. CurrentRoute
   activatedRoute.url.value[0].path

    // same as above with urlSegment[]
   activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))

   // same as above
   activatedRoute.snapshot.url[0].path

   // the url fragment from the parent route i.e. Root
   // since the parent is an ActivatedRoute object, you can get the same using 
   activatedRoute.parent.url.value[0].path
}

Người giới thiệu:

1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
2. https://angular.io/docs/ts/latest/api/router/index/Router- class.html
3. https://angular.io/docs/ts/latest/guide/router.html

Để có được các đoạn tuyến đường:

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

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

Bạn có thể thử với

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

constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url)  // array of states
console.log(activatedRoute.snapshot.url[0].path) }

Cách khác

router.location.path();   this works only in browser console. 

window.location.pathname cung cấp tên đường dẫn.

Để có được tuyến đường hiện tại đầy đủ, bạn có thể sử dụng

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);

windowĐối tượng bản địa cũng hoạt động tốt

console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);

LƯU Ý: KHÔNG SỬ DỤNG NÀY TRONG MÁY CHỦ PHỤC HỒI

phiên bản ngắn nếu bạn đã nhập Router thì bạn chỉ cần sử dụng một số thứ như

this .router.url === "/ tìm kiếm"

khác làm như sau

1) Nhập bộ định tuyến

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

2) Khai báo mục nhập của nó trong hàm tạo

constructor(private router: Router) { }

3) Sử dụng giá trị của nó trong chức năng của bạn

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

@victor trả lời đã giúp tôi, đây là câu trả lời giống như anh ấy nhưng với một chi tiết nhỏ, vì nó có thể giúp ai đó

import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}

Trong Angular2 Rc1, bạn có thể tiêm RouteSegment và vượt qua chúng theo phương pháp naviagte.

constructor(private router:Router,private segment:RouteSegment) {}

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }

Với góc 2.2.1 (trong dự án dựa trên angular2-webpack-starter) hoạt động như sau:

export class AppComponent {
  subscription: Subscription;
  activeUrl: string;

  constructor(public appState: AppState,
              private router: Router) {
    console.log('[app] constructor AppComponent');
  }

  ngOnInit() {
    console.log('[app] ngOnInit');
    let _this = this;
    this.subscription = this.router.events.subscribe(function (s) {
      if (s instanceof NavigationEnd) {
        _this.activeUrl = s.urlAfterRedirects;
      }
    });
  }

  ngOnDestroy() {
    console.log('[app] ngOnDestroy: ');
    this.subscription.unsubscribe();
  }
}

Trong mẫu của AppComponent, bạn có thể sử dụng, ví dụ: {{activeUrl}}.

Giải pháp này được lấy cảm hứng từ mã của RouterLinkActive.

góc 2 RC2

router.urlTree.contains(router.createUrlTree(['/home']))

Đây là những gì đang làm việc cho tôi trong Angular 2.3.1.

location: any;

constructor(private _router: Router) { 

      _router.events.subscribe((data:any) => { this.location = data.url; });

      console.warn(this.location);  // This should print only path e.g. "/home"
}

Đây datalà một đối tượng và chúng ta cần thuộc urltính chứa trong đối tượng đó. Vì vậy, chúng tôi nắm bắt giá trị đó trong một biến và chúng tôi cũng có thể sử dụng biến đó trong trang HTML của mình. Ví dụ: tôi muốn hiển thị div chỉ khi người dùng ở Trang chủ. Trong trường hợp này, giá trị url của bộ định tuyến của tôi sẽ là /home. Vì vậy, tôi có thể viết một div theo cách sau:

<div *ngIf="location == '/home'">
This is content for the home page.
</div>

Tôi đã có cùng một vấn đề sử dụng

this.router.url

Tôi nhận được tuyến đường hiện tại với các thông số truy vấn. Một cách giải quyết tôi đã làm là sử dụng cái này thay thế:

this.router.url.split('?')[0]

Không phải là một giải pháp thực sự tốt đẹp, nhưng hữu ích.

Bạn có thể sử dụng ActivatedRouteđể có được bộ định tuyến hiện tại

Câu trả lời gốc (cho phiên bản RC)

Tôi đã tìm thấy một giải pháp trên AngularJS Google Group và nó thật dễ dàng!

ngOnInit() {
  this.router.subscribe((url) => console.log(url));
}

Đây là câu trả lời ban đầu

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

CÁCH 1 : Sử dụng Angular: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

@Component({
    template: 'The href is: {{href}}'
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

CÁCH 2 Window.location như chúng tôi làm trong Javascript, Nếu bạn không muốn sử dụng bộ định tuyến

this.href= window.location.href;

Đối với mục đích của bạn, bạn có thể sử dụng this.activatedRoute.pathFromRoot.

import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}

Với sự trợ giúp của pathFromRoot, bạn có thể lấy danh sách các url cha và kiểm tra xem phần cần thiết của URL có khớp với điều kiện của bạn không.

Để biết thêm thông tin, vui lòng kiểm tra bài viết này http://blog.2muchcoffee.com/getting-civerse-state-in-angular2-router/ hoặc cài đặt ng2-router-helper từ npm

npm install ng2-router-helper

Để tìm cha mẹ của tuyến hiện tại, bạn có thể lấy UrlTreetừ bộ định tuyến, sử dụng các tuyến tương đối:

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});

Sau đó, để có được các phân đoạn của ổ cắm chính:

tree.root.children[PRIMARY_OUTLET].segments;

Đến bây giờ, tôi đang đi theo con đường của mình như sau -

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

Ở đâu, routerlà một ví dụ củaActivatedRoute

import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
  // Detect current route
  router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      console.log(val.url);
    }
});

Điều này thật đơn giản, ở góc 2 bạn chỉ cần nhập thư viện Router như thế này:

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

Sau đó, trong hàm tạo của thành phần hoặc dịch vụ, bạn phải khởi tạo nó như thế này:

constructor(private _router: Router) {}

Sau đó, trong bất kỳ phần nào của mã, trong một hàm, phương thức, cấu trúc, bất cứ điều gì:

      this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;  
                });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL                    
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 

Bạn có thể sử dụng trong tệp .ts

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

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

đây có thể là câu trả lời của bạn, hãy sử dụng phương thức params của tuyến được kích hoạt để lấy paramter từ URL / tuyến mà bạn muốn đọc, bên dưới là đoạn giới thiệu

import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
             this.yourVariable = params['required_param_name'];
        });
    }
}

this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

Nếu bạn cần truy cập url hiện tại, thông thường bạn phải đợi NavigationEnd hoặc NavigationStart để làm gì đó. Nếu bạn chỉ đăng ký vào các sự kiện của bộ định tuyến, thuê bao sẽ xuất ra nhiều sự kiện trong vòng đời của tuyến đường. Thay vào đó, hãy sử dụng toán tử RxJS để chỉ lọc cho Sự kiện bạn cần. Tác dụng phụ có lợi của việc này là bây giờ chúng ta có các loại chặt chẽ hơn!

constructor(private router: Router) {
    router.events.pipe(
      filter(ev => (ev instanceof NavigationEnd))
    ).subscribe((ev: NavigationEnd) => {
      console.log(ev.url);
    });
}

Tôi đã phải đối mặt với vấn đề tôi cần đường dẫn URL khi người dùng đang điều hướng qua ứng dụng hoặc truy cập URL (hoặc làm mới trên một URL cụ thể) để hiển thị các thành phần con dựa trên URL.

Hơn nữa, tôi muốn một chiếc Observable có thể được sử dụng trong mẫu, vì vậy router.url không phải là một tùy chọn. Cũng không đăng ký router.events vì định tuyến được kích hoạt trước khi mẫu của thành phần được khởi tạo.

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

Hy vọng nó sẽ giúp, chúc may mắn!