如何使用角度（角度2或4）路线更改页面的 Headers ？-Java 学习之路

每当我点击或浏览URL栏中的链接时，我想更改页面的 Headers . 如何使用Angular路线改变它？我正在使用角度版本4和角度cli .

2 回答

你必须将“title”作为数据传递给你的路线

const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
    { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
    { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
  ]
}];

然后在您的Component中执行此导入：

import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

一旦导入，我们可以注入它们：

@Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
})
export class AppComponent {
  constructor( private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title) {}
}

要静态更新页面 Headers ，我们可以像这样调用setTitle：

ngOnInit() {
     this.router.events
        .filter((event) => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map((route) => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {
            let title = 'Default Title Here'
            if(event['title']) {
                title = event['title'];
            }
            this.titleService.setTitle(title);
        });
}

回复于 2024-04-28T04:00:26+08:00

You can to use @angular/platefor-browser to use the setTitle():

import { Title } from '@angular/platform-browser';

@Component({
  selector: 'your-component',
})

export class YourComponent implements onInit {
  constructor(private title: Title) {}

 ngOnInit() {
     this.title.setTitle('Title for this component');
 }

}

回复于 2024-04-28T04:00:26+08:00

如何使用角度（角度2或4）路线更改页面的 Headers ？

2 回答

相关问题