[英]change detection between 2 angular components
i have 2 components - navigation (which shows topics list) and video-list (which shows the selected one). 我有2个组成部分-导航(显示主题列表)和视频列表(显示所选列表)。
all i want to do is that when i click on some navigation element, the video list title will change. 我要做的就是当我单击某个导航元素时,视频列表标题将更改。
navigation.component.ts navigation.component.ts
import { Component, OnInit } from '@angular/core';
import {DataService} from "../../../services/data.service";
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css'],
providers: [DataService]
})
export class NavigationComponent implements OnInit {
allTopics: any;
mainTopics: any;
constructor(private data: DataService) {
this.allTopics = this.data.getAllTopics().subscribe(data => {
this.allTopics = data;
this.mainTopics = Object.keys(data);
} );
}
setCurrentSelectedSubTopic(subTopic) {
this.data.setCurrentSelectedSubTopic(subTopic)
}
ngOnInit() {
}
}
on this component i have a click action: 在这个组件上,我有一个点击动作:
(click)="setCurrentSelectedSubTopic(subTopic)"
when i click, i get a good console.log. 当我单击时,我会得到一个很好的console.log。 this function update a service.
此功能更新服务。
data.service.ts data.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response } from '@angular/http';
@Injectable()
export class DataService {
currentSelectedSubTopic: any;
constructor(private http: Http) {}
getAllTopics(): Observable<any> {
return this.http.get(`http://localhost:4200/getAllTopics`)
.map(res => res.json())
}
setCurrentSelectedSubTopic(subTopic) {
this.currentSelectedSubTopic = subTopic;
}
}
this service is injected to video-list.component.ts 该服务被注入到video-list.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-video-list',
templateUrl: './video-list.component.html',
styleUrls: ['./video-list.component.css'],
providers: [DataService]
})
export class VideoListComponent implements OnInit {
constructor(public data: DataService) {
}
ngOnInit() {
}
}
and it html is: 它的html是:
<p>
{{data.currentSelectedSubTopic ? data.currentSelectedSubTopic.Name : ''}}
</p>
no matter what i tried to do, this html doesn't change 无论我尝试做什么,此html都不会改变
You cant see immediate update because you are using different instances of DataService
. 您看不到立即更新,因为您正在使用
DataService
不同实例。 To make it work, make sure to have a single instance of your service. 要使其正常工作,请确保具有一个服务实例。 To do that, put
providers
array in AppModule's
or RootComponent's
@NgModule
decorator as shown below, 为此,将
providers
数组放置在AppModule's
或RootComponent's
@NgModule
装饰器中,如下所示,
@NgModule({
...
...
providers: [DataService]
...
})
and remove providers: [DataService]
from both individual component. 并从两个单独的组件中删除
providers: [DataService]
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.