路由模块可用于调用读取当前路由值的函数吗?

问题描述 投票:0回答:2

在Angular上,我想调用一些函数,这些函数将根据当前页面路由返回一个值。现在,某些功能已临时放置在我需要按路线的组件进行更改的元素中。

我知道要对这些功能进行编码。我的问题是:1.是否需要为这些功能创建诸如“ ColorService”之类的服务?2.是否可以从我想根据工艺路线更改的元素的组件中调用这些函数?还是通过路由模块?

这是我当前的路由模块:

import { NgModule } from '@angular/core';
import { HomeHebComponent } from '../components/home-heb/home-heb.component';
import { AboutHebComponent } from '../components/about-heb/about-heb.component';
import { ContactHebComponent } from '../components/contact-heb/contact-heb.component';
import { GalleryComponent } from '../components/gallery/gallery.component';
import { Routes, RouterModule } from '@angular/router';
import { Page404Component } from '../components/page404/page404.component';
import { PlywoodHebComponent } from '../components/plywood-heb/plywood-heb.component';
import { MdfHebComponent } from '../components/mdf-heb/mdf-heb.component';
import { TegoTlatOsbHebComponent } from '../components/tego-tlat-osb-heb/tego-tlat-osb-heb.component';
import { HardwoodHebComponent } from '../components/hardwood-heb/hardwood-heb.component';
import { MapHebComponent } from '../components/map-heb/map-heb.component';

const routes: Routes = [
    { path: 'heb/home', component: HomeHebComponent},
    { path: 'heb/about', component: AboutHebComponent},
    { path: 'heb/plywood1', component: PlywoodHebComponent},
    { path: 'heb/mdf', component: MdfHebComponent},
    { path: 'heb/hardwood', component: HardwoodHebComponent},
    { path: 'heb/plywood2', component: TegoTlatOsbHebComponent},
    { path: 'heb/contact', component: ContactHebComponent},
    { path: 'heb/map', component: MapHebComponent},
    { path: 'heb/gallery', component: GalleryComponent},
    { path: '', redirectTo: '/heb/home', pathMatch: 'full' },
    { path: '**', component: Page404Component }

];


@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ]
})
export class RoutingModule { }

这是菜单文件的变色功能示例:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
    private route: string;
  constructor(location: Location, private router: Router) {
      router.events.subscribe( val => {
          if (location.path() !== '') {
              this.route = location.path();
              console.log(this.route);

      } else {
          this.route = 'home';
          console.log(this.route);

      }
    });
   }

  ngOnInit() {

  }
// switches color according to routing
  private  toggleColorAboutRouting(): string {
      return this.route === '/heb/about' ?  'white' :  'initial';
  }
}


angular typescript service module angular2-routing
2个回答
0
投票

您可以使用Angular Router并检查url属性以在组件中驱动该功能。

export class MenuComponent implements OnInit {
  private route: string;

  constructor(router: Router) {}

  ngOnInit() {
      this.route = this.toggleColorAboutRouting(this.router.url);
  }

// switches color according to routing
  private  toggleColorAboutRouting(url: string): string {
      return this.route === '/heb/about' ?  'white' :  'initial';
  }
}

0
投票

您可以将数据对象传递给路线

import { NgModule } from '@angular/core';
import { HomeHebComponent } from '../components/home-heb/home-heb.component';
import { AboutHebComponent } from '../components/about-heb/about-heb.component';
import { ContactHebComponent } from '../components/contact-heb/contact-heb.component';
import { GalleryComponent } from '../components/gallery/gallery.component';
import { Routes, RouterModule } from '@angular/router';
import { Page404Component } from '../components/page404/page404.component';
import { PlywoodHebComponent } from '../components/plywood-heb/plywood-heb.component';
import { MdfHebComponent } from '../components/mdf-heb/mdf-heb.component';
import { TegoTlatOsbHebComponent } from '../components/tego-tlat-osb-heb/tego-tlat-osb-heb.component';
import { HardwoodHebComponent } from '../components/hardwood-heb/hardwood-heb.component';
import { MapHebComponent } from '../components/map-heb/map-heb.component';

const routes: Routes = [
    { path: 'heb/home', component: HomeHebComponent},
    { path: 'heb/about', component: AboutHebComponent, data: {color: 'white'},
    { path: 'heb/plywood1', component: PlywoodHebComponent},
    { path: 'heb/mdf', component: MdfHebComponent},
    { path: 'heb/hardwood', component: HardwoodHebComponent},
    { path: 'heb/plywood2', component: TegoTlatOsbHebComponent},
    { path: 'heb/contact', component: ContactHebComponent},
    { path: 'heb/map', component: MapHebComponent},
    { path: 'heb/gallery', component: GalleryComponent},
    { path: '', redirectTo: '/heb/home', pathMatch: 'full' },
    { path: '**', component: Page404Component }

];


@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ]
})
export class RoutingModule { }

以及您的伙伴

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
color = 'initial';
export class MenuComponent implements OnInit {
    private route: string;
  constructor(location: Location, private router: Router, private route: ActivatedRoute,) {
     route.data.subscribe(
       (data)=> this.color = data.color);

}
© www.soinside.com 2019 - 2024. All rights reserved.