在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 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';
}
}
您可以将数据对象传递给路线
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);
}