Path variable to use in data in Angular-CodePudding

i have a problem with tab title setting. Before is was always the same title which is set in index.html

Now i would like to have another title in some components and wanted to and using data routes for it, but is it possible to take :userId from path directly in data?

{ path: 'users/user-details/:userId', component: UserDetailsComponent, canActivate: [AuthGuard], data : {title:'User - '}}

So the tab title should look like this

User - 1234 or User - :userId

Thanks in advance

CodePudding user response：

If I understand correctly, you want to set the document title dinamically based on the route params.

You can use Title service to achieve that.

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [Title],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inject it on your component:

export class UserDetailsComponent implements OnInit {
  public constructor(private title: Title, private route: ActivatedRoute) { }

Then retrieve data from the activated route and pass it to the setTitle method:

ngOnInit() {
    const title: string = route.snapshot.data.title;
    const userId: string = route.snapshot.params.userId;
    this.title.setTitle(title   userId);
}

In this example I'm using the route snapshot but you might want to subscribe to the route observables instead.

CodePudding user response：

Welcome! try to do something like this:

In your .ts component:

...
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
})
export class YourComponent {

  id: string = '';
 
  constructor(private activatedRoute: ActivatedRoute) {
    this.id = this.activatedRoute.snapshot.paramMap.get('userID');
    console.log(this.id);
  }

 }

That was if your userID is not going to change. If it could be changed, then you can try this other approach, changing the constructor:

    this.activatedRoute.paramMap.subscribe((params) => {
      this.id = params.get('userID');
      console.log(this.id);
    });