Javascript 如何在AngularJs路由中更改html元素或基于页面传递数据？

我创建了一个名为

的组件，这个部分应该显示每个页面的标题。我想用

下面是HTML：

<div class="bradcam_area bradcam_bg_1">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="bradcam_text text-center">
                    <h3> Change this based on the page </h3>
                </div>
            </div>
        </div>
    </div>
</div>

我不知道该怎么办

以下是关于页面，例如：

<app-header></app-header>
    <bradcam-area></bradcam-area>
    <!-- You can add extra content under this comment -->

    <about-area></about-area>
<app-footer></app-footer>

---

我找到了一个解决方案。我使用了ngIf方法

在

Ts文件中，我添加了这些

  private router: Router;

  constructor(router: Router) {
    this.router = router;
  }

下面是

{{titles.about}
{{titles.services}
{{titles.portfolio}}
{{titles.contact}

不使用

*ngIf

（查看您自己的解决方案），您只需执行以下操作：

<h3> {{ titles[router.url] }} </h3>

{{titles[router.url]}

---

更紧凑、更快速、更易于维护和更新。

不必在构造函数中执行

this.router=router

，只需转到

constructor（private router:router）{}

FYI，AngularJS指的是旧项目，也就是AngularJS 1.x。之后的所有版本（Angular 2,4,5,6,7,8,9）都被简单地称为Angular（无JS）。AngularJS和AngularJS是两个完全不同的框架，不应该混淆。

<div class="bradcam_area bradcam_bg_1">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="bradcam_text text-center">
                    <h3 *ngIf="router.url === '/about'"> {{ titles.about }} </h3>
                    <h3 *ngIf="router.url === '/services'"> {{ titles.services }} </h3>
                    <h3 *ngIf="router.url === '/portfolio'"> {{ titles.portfolio }} </h3>
                    <h3 *ngIf="router.url === '/contact'"> {{ titles.contact }} </h3>
                </div>
            </div>
        </div>
    </div>
</div>

<h3> {{ titles[router.url] }} </h3>