嗨,我正在开发一个angular 6应用程序,该应用程序需要采用的默认路由已参数化。我的问题是如何从组件中导入这些参数并在我的路线中使用它们。 路由mdoule->
import { NgModule } from '@angular/core';
import {Routes,RouterModule} from '@angular/router'
import {SuperbarComponent} from './superbar/superbar.component'
import { FeedComponent } from './feed/feed.component';
const routes : Routes = [
{path : ':su/:cat', component : FeedComponent} //this route it needs to take on default
{path : '', redirectTo :'/:su/:cat' , pathMatch : 'full'}
]
@NgModule({
imports : [RouterModule.forRoot(routes),],
exports: [RouterModule,]
})
export class AppRoutingModule { }
如何使路由器从其他组件中获取这些默认值。它需要从超级栏组件中获取值supercategories [0]和supermap.get(supercategories [0])[0] ['category'] >
superbar.ts --->
import { Component, OnInit, ViewChild } from '@angular/core';
import {Http} from '@angular/http';
import {MetadataService } from '../metadata.service';
import {Tag, CatJson} from '../meta-data-model';
import {CatbarComponent} from '../catbar/catbar.component';
@Component({
selector: 'app-superbar',
templateUrl: './superbar.component.html',
styleUrls: ['./superbar.component.css']
})
export class SuperbarComponent implements OnInit {
@ViewChild('child1')
private child1 : CatbarComponent
supermap = new Map();
isloggedin : boolean = true;
isloading : boolean = true;
tester : string = 'This message to test shit'
supercategories : Tag [] = [];
allcategories : Tag[] = [];
categories : Tag[] = [];
tempCategories : Tag[] = [];
selectedsu : Tag;
constructor(private meta : MetadataService) {}
//using meta data service to get supercategories
ngOnInit() {
this.meta.getmetadata().subscribe(response =>{
//newCatJson requires an object type data
//in earlier versions one needed to body.parse(), but since http returns an object
//that no longer needs be done
const data = new CatJson(response);
this.supercategories = data.superCat;
this.selectedsu = this.supercategories[0];
this.allcategories = data.allCat;
this.createsupermap();
this.categories = this.supermap.get(this.selectedsu);
console.log(this.supermap.get(this.selectedsu)[0]['superCategory']);
this.isloading = false;
});
}
//superbarclick needs to define a change in catbar
//we need to define a function that first defines a change in catgories
//since [input] is using object referencing
superclick(data : Tag) {
this.selectedsu = data;
this.tempCategories = [];
this.allcategories.forEach(item => {
if(this.selectedsu.superCategory == item.superCategory)
this.tempCategories.push(item);
})
this.categories = this.tempCategories;
//feedchangefunction in categorybar needs to be referenced such that
if(this.isloggedin)
this.child1.catclick(data);
}
createsupermap(){
//this map is required to streamline the process of pasing data to o(1)
this.supercategories.forEach(selement => {
//create a blank array
const data : Tag[] = [];
this.allcategories.forEach(element => {
if(element.superCategory == selement.superCategory)
data.push(element)
});
this.supermap.set(selement,data);
});
}
}
superbar html->
<div class = "loader" *ngIf = "isloading"></div> <!--Needs some form of updation because is looking untidy-->
<div *ngIf ="!isloading">
<ul class="ul-super container">
<ng-container *ngIf="selectedsu">
<li *ngFor="let super of supercategories" class="navbar-super-link navbar-custom font-preadr p-preadr cursor-pointer" (click) ="superclick(super)" [ngClass]="{'selected-super': selectedsu.name === super.name}" routerLink="/{{supermap.get(super)[0]['superCategory']}}/{{supermap.get(super)[0]['category']}}">
{{super.displayName}}
</li>
</ng-container>
</ul>
<ng-container *ngIf="categories.length > 0 ">
<div *ngIf ="isloggedin">
<app-catbar #child1 [categories]="categories"></app-catbar>
</div>
</ng-container>
</div>