我们可以在角度2中访问路由模块中的组件变量

Question

我们正在为我们的应用程序使用多语言。所以我们需要更改语言，从输入localhost到localhost / en .So，如果我更改URL中的语言需要在所有菜单列表中生效。我们怎样才能在Angular 5中实现这个目标？

Answer 1

On Angular 4（我认为甚至可以在Angular 5上工作）你可以将语言值设置为data属性：

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

@Component({ 
    template: `
    <h1>Angular Router</h1>
    <nav> <a routerLink="/home" routerLinkActive="active"> Home </a>
          <a routerLink="/about" routerLinkActive="active"> About </a>
    </nav>
    <router-outlet></router-outlet> `
})

export class AppComponent {}

@NgModule({
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot([
            { path: "home", component: HomeComponent, pathMatch: "full", data: { language: "en"},
                children:
                [ 
                    { path: "it", component: HomeComponent, pathMatch: "full", data: { language: "en"},
                    { path: "de", component: HomeComponent, pathMatch: "full", data: { language: "en"}
                ]
            },
            { path: "about", component: AboutComponent,
        ])
    ],
    exports: [ RouterModule ]
})

要将数据属性读入您的主组件，您可以使用ActivatedRoute.snapshot来提取路由参数：

import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})

export class HomeComponent{
    
    constructor(private route: ActivatedRoute)
    {
        // Read the data property
        let languageValue = this.route.snapshot.params['language'];
    }

}

Answer 2

我们已将语言成分

包括在内

通过访问此语言组件作为父模块，在router.module中完成重新路由。