Finding parameters in Angular 4

Question

Finding parameters in Angular 4

I am working on implementing a multilanguage feature in an Angular app and I need to establish the default language when the site loads. The two languages supported are Spanish and English, with Spanish being the default language. In order to achieve this, I have the following routing setup:

const routes: Routes = [
  {
    path: ':lang', component: LanguageComponent,
    children: [
      { path: 'route1', component: Component1 },
      { path: 'route2', component: Component2 },
      { path: 'route3', component: Component3 },
      { path: 'route4', component: Component4 },
      { path: '', component: Component1 , pathMatch: 'full' },
    ],
  },
  { path: '', redirectTo: 'es', pathMatch: 'full' }
];

I am unsure if this structure of routing is correct for my requirements, which include using the same route for both languages and translating content at runtime using a custom translation service. One main issue I'm facing is that whenever I try to inspect the route params, they show as undefined. Here is how I'm trying to get the current language in my ngOnInit:

this.activatedRoute.params.subscribe((params: Params) => {
  this.currentLanguage = params['lang'];
});

I have also attempted this approach:

this.activatedRoute.params.subscribe((params) => {
  this.currentLanguage = params.lang;
});

I suspect that the problem lies in the redirection step, but I'm not certain how to set the ":lang" parameter during that redirect. Can you provide any insight or guidance on this issue?

angular typescript angular-routing

Answer 1

Answer №1

In my opinion, a great approach would be to implement a service called AppTranslateService that manages the language settings defined in the LanguageComponent:

@Injectable()
export class AppTranslateService {
  public currentLang: string = 'en';
}

@Component({/*...*/})
export class LanguageComponent {
  constructor(appTranslateService: AppTranslateService, activatedRoute: ActivatedRoute) {
    activatedRoute.params.subscribe((params) => {
      appTranslateService.currentLang = params['lang'];
    });
  }
}

Then, you can simply access the appTranslateService.currentLang variable in other components.

Another option is to retrieve the desired parameter directly in your components using Angular's Router injection, for example: router.url.split('/')[1] (or perform this operation once in a shared service).

Answer 2

In my opinion, a great approach would be to implement a service called AppTranslateService that manages the language settings defined in the LanguageComponent:

@Injectable()
export class AppTranslateService {
  public currentLang: string = 'en';
}

@Component({/*...*/})
export class LanguageComponent {
  constructor(appTranslateService: AppTranslateService, activatedRoute: ActivatedRoute) {
    activatedRoute.params.subscribe((params) => {
      appTranslateService.currentLang = params['lang'];
    });
  }
}

Then, you can simply access the appTranslateService.currentLang variable in other components.

Another option is to retrieve the desired parameter directly in your components using Angular's Router injection, for example: router.url.split('/')[1] (or perform this operation once in a shared service).

Finding parameters in Angular 4

Answer №1

Similar questions

Is it possible to dynamically load the child path of the Foo Component from a separate component using the current route data?

Loading an index.html file using Webpack 3, Typescript, and the file-loader: A step-by-step guide

JHipster's selection of radio button options

What is the best way to utilize ngFor for iterating through a Map variable of classes in TypeScript?

A guide on refreshing the dependencies list within Angular's node modules and package.json files

Resolving conflict between a user-defined class name and a built-in class name

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

Is there a way to safeguard against accidental modifications to MatTab without prior authorization?

What could cause a member variable to be uninitialized in the ngInit method in Ionic/Angular, even though it was initially set in the constructor

Using TypeScript absolute imports from another project for standard TypeScript files and declarations at a global scope

"Slow loading times experienced with Nextjs Image component when integrated with a map

What is the best way to focus on a particular version of TypeScript?

Angular Multiplexed Templates - Utilizing a Variety of Components

Data cannot be transferred to a child element unless it has been initialized during the definition phase

I'm in the process of putting together a node.js project using typescript, but I'm a little unsure about the steps needed to

Is it Feasible to Use Component Interface in Angular 5/6?

Definition file for Typescript d.ts that includes optional properties in a function

There are several InputBase elements nested within a FormControl

Is implementing client components in Server Side pages an effective strategy for optimizing SSR performance?

Error in displaying dialogues upon clicking