Angular 组件之间的数据共享答案

【问题标题】：Data Sharing between Angular componentsAngular 组件之间的数据共享
【发布时间】：2019-08-04 04:22:00
【问题描述】：

我是 Angular 6 的新手。我正在使用 Angular 6 创建一个项目。我在共享数据时遇到了问题。这是项目结构：

1) 标题组件 2 登录组件 3) 家庭组件 4) 共享服务

我正在根据当前路由在我的标题组件中添加类。这正在处理页面刷新。但是当我从一个组件移动到另一个组件时，这不起作用。

代码如下：

布局组件是：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>

标题组件：

 ngOnInit() {
    console.log(this.dataService.urlExists())
    if(this.dataService.urlExists()){
      this.url = true
     }else{
       this.url = false
     };

  }
<header class="stick-top forsticky" id="header" [ngClass]="{'gradient': url==true}">
</header>

共享服务：

urlExists(){
     this.url = this.router.url
     if(this.url == "/"){
         return false;
     }else{
         return true;
     }
 }

请注意：在页面刷新时这是有效的..

【问题讨论】：

标签： javascript angular

【解决方案1】：

这是因为，您的标头组件在导航时不会重新初始化，因为它位于 router-outlet 之外。您需要监听路由变化并相应地执行所需的操作。

所以在Header Component中，可以订阅路由事件，监听NavigationEnd事件来查看URL：

import {NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators';
...



constructor(private router: Router) {
    this.subscribeRouterEvents();

}

subscribeRouterEvents = () => {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd)
    ).subscribe(() => {
       console.log(this.dataService.urlExists())
       if(this.dataService.urlExists()){
          this.url = true
       }else{
          this.url = false
       };
    });

【讨论】：

很高兴为您提供帮助:)