Question

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

1）标头组件 2登录组件 3）家庭组件 4）共享服务

我正在基于当前路由在我的标头组件中添加类。这正在刷新页面。但是，当我从一个组件转移到另一个组件时，它就无法工作。

代码如下：

布局组件为：

this.router.navigate([`/MyList`], { queryParams: { id: '25'} });

标题组件：

<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>

请注意：在页面刷新中，此方法有效。

Answer 1

这是因为，导航时，标头组件未在router-outlet之外，因此未重新初始化。您需要侦听路线更改并相应地执行所需的操作。

因此，在标头组件中，您可以订阅路由器事件并侦听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
       };
    });

Angular组件之间的数据共享

1 个答案: