如何在角度6中设置默认路线的参数

时间:2018-06-22 05:54:09

标签: angular routing

嗨,我正在开发一个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>

0 个答案:

没有答案