在 Angular 中的数据中使用的路径变量

Question

我对选项卡标题设置有疑问。之前始终是 index.html

中设置的相同标题

现在我想在某些组件中有另一个标题，并希望为它使用数据路由，但是是否可以直接从数据中的路径获取 :userId？

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

所以标签标题应该是这样的

User - 1234 or User - :userId

提前致谢

Answer 1

欢迎光临！尝试做这样的事情：

在您的 .ts 组件中：

...
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);
  }

 }

那是在您的用户 ID 不会更改的情况下。如果可以更改，那么您可以尝试另一种方法，更改构造函数：

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

Answer 2

如果我没理解错的话，你想根据路由参数动态设置文档标题。

您可以使用 Title 服务来实现。

在模块提供商上注册：

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

将其注入您的组件：

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

然后从激活的路由中获取数据并传递给setTitle方法：

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

在此示例中，我使用的是路由快照，但您可能希望改为订阅路由可观察对象。

在 Angular 中的数据中使用的路径变量

Path variable to use in data in Angular

typescript

angular

angular-router