Angular4更改子组件中的导航栏值

Posted 2023-02-23

【中文标题】Angular4更改子组件中的导航栏值

【英文标题】：Angular4 changing navbar value in a child component

【发布时间】：2018-02-27 05:10:59

【问题描述】：

假设我们有一个带有下拉菜单的导航栏，允许选择一个城市。当我们选择一个城市时，我们会被重定向到http://Domain/:city，通常导航栏下拉菜单应该显示所选城市的名称，而不是“选择一个城市”。 该应用程序组件包含导航栏和路由器出口，它们重定向到显示城市信息的组件。该组件使用 ActivatedRoute 从 URL 中获取城市名称。

-- app.component.ts --
<app-navbar></app-navbar>
<router-outlet></router-outlet>

-- navbar.html--
<ul class="nav pull-left">
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <span *ngIf="!_selectedCity">Choose a city</span>
            <span *ngIf="_selectedCity"> _selectedCity.name </span>
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li routerLinkActive="active" *ngFor="let city of _cities"><a [routerLink]="['', city.name]" (click)="selectCity(city)"> city.name </a></li>
          </ul>
        </li>
</ul>

为了将导航栏下拉菜单从“选择城市”更改为所选城市的名称，我添加了 onClick 事件，它运行良好。但是，如果用户通过键入 URL 而不是从下拉菜单中选择城市来访问城市信息，我如何将导航栏的下拉值设置为城市名称？

谢谢

【问题讨论】：

您能否为该问题添加一个工作演示或显示更多组件和模板的代码？

【参考方案1】：

您可以订阅路由器事件并检查组件的 OnInit 中的 url 参数以设置下拉值：

 import  ActivatedRoute  from '@angular/router';
 ...
 constructor(private activatedRoute: ActivatedRoute) 
 ...
 ngOnInit() 
    this.activatedRoute.params.subscribe((params: Params) => 
        console.log(params['cityName']); //or whichever you use
      );
  

【讨论】：

我想过这个解决方案，但我认为它不是正确的。 Angular 应该允许在组件之间传输数据。

哪些组件？此外，如果用户从地址栏中输入 url，则不会转移

我可能找到了一种解决方案，使用服务将数据从一个组件传输到另一个组件。我将遵循这些步骤，我认为它会解决我的问题。 angularfirebase.com/lessons/…

如果您正在寻找组件交互，角度文档很棒：angular.io/guide/component-interaction