我的标签标题设置有问题。之前总是与 index.html 中设置的标题相同
现在我想在某些组件中有另一个标题,并希望并为其使用数据路由,但是是否可以直接在数据中从路径中获取 :userId ?
{ path: 'users/user-details/:userId', component: UserDetailsComponent, canActivate: [AuthGuard], data : {title:'User - '}}
所以标签标题应该是这样的
用户 - 1234 或用户 - :userId
提前致谢
回答1
如果我理解正确,您想根据路由参数动态设置文档标题。
您可以使用 https://angular.io/guide/set-document-title#set-the-document-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);
}
在此示例中,我使用的是路由快照,但您可能希望订阅路由可观察对象。
回答2
欢迎!尝试做这样的事情:
在您的 .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);
});