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

Adding Custom CSS File to an iFrame in Angular

Merging Promises in Typescript

Issue encountered with Angular 12 Material table: The data source provided does not match an array, Observable, or DataSource

Definition for a function within a specific namespace that returns the specified object

Leveraging the power of TypeScript and Firebase with async/await for executing multiple

Eliminate perfect-scrollbar functionality on mobile devices

Effective ways to manage extensive forms in Angular 2

React: Content has not been refreshed

"Facing an issue where ts-node is not recognizing d.ts files, despite tsc being able to compile them

The JSONP request failed with an error stating: ReferenceError: document is not defined

Typescript: Delay code execution until a function has completed running

Prevent any angular text box from allowing just one special character

Failed CORS request in Angular

I prefer the value to switch to false whenever I navigate to a new route and then return to the previous route, as the sidebar remains open

How can you establish the default value for a form from an Observable?

Encountered an unexpected import token in Angular2 (SystemJS)

The element 'commit' cannot be found within the property

Is there a way for Ionic to remember the last page for a few seconds before session expiry?

Typescript's async function failing to execute properly

How can the creation of directories for services be avoided in angular-cli?