Angular 2 - 匹配 URL 到路由 [英] Angular 2 - Match URL to Route

问题描述

是否可以通过 URL 或路径找出它在代码隐藏中匹配的路由?

例如:Router.matchRoute('my/route') 返回有关匹配路由的信息，例如:

<代码>{路径:'我的/路线'，组件:HeroListComponent，数据:{标题:'英雄列表'}}

基本上，我要做的是判断我当前 URL/路径的路由是否与被导航到的路由匹配.

解决方案

如果你想获取当前 URL 并根据它是什么在组件代码中做出一些决定，例如添加一个样式来为当前项目着色导航菜单，然后您可以从路由器获取当前 URL 并将其与已知值进行比较以执行某些操作.

 import { Router } from '@angular/router';构造函数(专用路由器:路由器) {}

然后您可以编写函数来检查特定路线:

 isSomePage() {if (this.router.url.includes('/my-page-path/')) {返回活跃"；} 别的 {返回 '​​';}}

然后将事物函数绑定到 ngClass 以将类(活动)添加到该项目并使用 css 对其进行样式设置.

 
当 URL 匹配 isSomePage 函数时给我上色"

然后通过 css 设置样式

div.active {白颜色;背景颜色:红色；}

如果您待在一个地方并希望监视 URL 的更改，您可以订阅 router.events，例如，如果您通过 URL 传递一个id"变量，如下所示:

http://localhost:4000/#/home/my-component/?id=1146605

您可以订阅 id 值的更改 - 在本例中，我将这些值记录到控制台，但是一旦您在此处获得该值，您就可以对它执行任何您喜欢的操作.

import { Router, NavigationEnd, Params } from '@angular/router';var routerPassedParamngOnInit() {this.router.events.filter(event => event instanceof NavigationEnd).订阅(事件=> {console.log("事件", 事件);这条路线.queryParams.订阅(参数=> {//如果没有提供查询参数，则默认为 0.var routerPassedParam = +params['id'] ||0;console.log('查询参数 routerPassedParam: ', routerPassedParam);});})}

Is it possible to take a URL or path and find out which route it matches in the code-behind?

Ex: Router.matchRoute('my/route') returns information about the matching route, like:

{
  path: 'my/route',
  component: HeroListComponent,
  data: { title: 'Heroes List' }
}

Basically, what I'm trying to do is to tell if the route of my current URL/path matches that of the one being navigated to.

解决方案

If you want to get the current URL and make some decisions in the component code based on what it is, for example adding a style to colour the current item in a navigation menu, then you can get the current URL from the Router and compare it to a known value to do something.

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

 constructor(
    private router: Router
 ) {}

Then you can write functions to check for a particular route:

 isSomePage() {
    if (this.router.url.includes('/my-page-path/')) {
        return 'active';
    } else {
        return '';
    }
 }

And then bind thing function to ngClass to add the class (active) to that item and style it with css.

 <div [ngClass]="isSomePage()">
    "colour me when the URL matches the isSomePage function"
 </div>

Then style this via css

div.active {
    color: white;
    background-color: red;
}

In the case where you're staying in one place and want to monitor the URL for changes, you can subscribe to router.events, for example if you were passing an 'id' variable via URL like this:

http://localhost:4000/#/home/my-component/?id=1146605

You could subscribe to the changes in id values - in this example I'm logging the values to the console, but you can do whatever you like with the value once you've got it here.

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

var routerPassedParam

  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {
        console.log("event", event);
        this.route
          .queryParams
          .subscribe(params => {
            // Defaults to 0 if no query param provided.
            var routerPassedParam = +params['id'] || 0;
            console.log('Query param routerPassedParam: ', routerPassedParam);
          });
      })
}

这篇关于Angular 2 - 匹配 URL 到路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！