[英]Data Sharing between Angular components
我是角度6的新手。我正在使用角度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;
}
}
请注意:在页面刷新时这是有效的..
这是因为,导航时不会重新启动标头组件,因为它在router-outlet
。 您需要监听路由更改并相应地执行所需的操作。
因此,在Header组件中,您可以订阅路由器事件并监听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
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.