检测从组件到其他组件的更改并绑定新数据

时间:2018-01-07 14:26:41

标签: angular observable

关于如何从组件1通知组件2已经更新数据并且你应该在没有刷新的情况下绑定它,我几周都陷入困境。我会通知你我的代码也许有人可以知道我的概念有什么问题。

我有两个组件(新闻提要)和(帖子)。

新闻feed.component.ts:

修改

这是get sharedData

get sharedData() //<--a getter
            {
                return this._newElement.sharedData;
            } 

这是ngOnInit()

ngOnInit() {

this._newElement.data.subscribe((param: any) => { //<--subscribe to an observable
    this.data=param;
});

在我的帖子组件onsuccess中,我使用了this._newElement.change(this.result.data);  在newsFeed()this._newElement.sharedData=this.result.data.posts;和我的html中,我将data替换为sharedData

编辑结束

 newsFeed() {

        this._newsFeedService.newsFeedService(this.user)
            .subscribe(
                response => {
                    this.result = response;
                    if (this.result.code == -502) {
                      // error
                        }
                    } else if (this.result.code == 1) {
                        this.data = [] = this.data || [];
                        this.result.data.posts.forEach(item => {
                            this.data.push(item);
                        });
                    }
                    else {
                        this.alert = this._appService.newAlert('danger', this.result.msg);
                    }
                },
                error => console.log(error)
            );
    }

新闻feed.service.ts:

@Injectable()
export class NewsFeedService {


    private newsFeedAPI = AppGlobals.API_URL + 'news_feed/news-feed.php';

    constructor(private _appService: AppService) {
    }


    newsFeedService(value: Object) {
        return this._appService.LoadAPI(value, this.newsFeedAPI);
    }
}

新闻feed.ts:

export class NewsFeed {

user_id: string;
session_key: string;
page: number;
postText: string;
postID: any;

constructor() {
}

}

这是我上面使用的LoadAPI(),它位于app.service.ts:

 public LoadAPI(data: Object, API: string): Observable<any> {
        const headers = new Headers();
        headers.append('Content-Type',
            'application/x-www-form-urlencoded;charset=utf-8');

        return this._http.post(API, data, {
            headers: headers
        }).map(res => res.json());
    }

现在在我的html中我像往常一样显示数据:

 <div *ngFor="let item of sharedData" id="{{item.post_id}}" class="post_{{item.post_id}}">
        <article  class="hentry post card_{{item.post_id}}">
            //data
        </article>
</div>

最大的问题是:

post.component.ts我有insertPost()函数和onSuccess中,它会返回news-feed.component应检测到的新数据。主要想法是什么?

0 个答案:

没有答案