独钓寒江雪

angular 动态修改 title description

根据路由修改 title, description

用于 seo

步骤

创建

1
2
3
4
ng new demo

ng g c aaa
ng g c bbb

代码

app.routes.ts

1
2
3
4
5
6
7
8
9
10
import { Routes } from "@angular/router";
import { Home } from "./home/home";
import { Aaa } from "./aaa/aaa";
import { Bbb } from "./bbb/bbb";

export const routes: Routes = [
  { path: "", component: Home },
  { path: "aaa", component: Aaa },
  { path: "bbb", component: Bbb },
];

app.html

1
2
3
4
5
6
7
8
9
<div>
  <a [routerLink]="['/aaa']">aaa</a>
</div>
<div>
  <a [routerLink]="['/bbb']">bbb</a>
</div>

<input type="button" value="js 到 aaa" (click)="toAaa()" />
<router-outlet></router-outlet>

app.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component } from "@angular/core";
import { Router, RouterModule, RouterOutlet } from "@angular/router";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, RouterModule],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class App {
  protected title = "demo";

  constructor(private router: Router) {}

  toAaa() {
    this.router.navigate(["/aaa"]);
  }
}

aaa.ts

1
2
3
4
5
6
7
8
9
10
11
export class Aaa implements OnInit {
  constructor(private title: Title, private meta: Meta) {}

  ngOnInit() {
    this.title.setTitle("aaa 页的 title");
    this.meta.updateTag({
      name: "description",
      content: "aaa 页的 description",
    });
  }
}

bbb.ts

1
2
3
4
5
6
7
8
9
10
11
export class Bbb implements OnInit {
  constructor(private title: Title, private meta: Meta) {}

  ngOnInit() {
    this.title.setTitle("bbb 页的 title");
    this.meta.updateTag({
      name: "description",
      content: "bbb 页的 description",
    });
  }
}
angular