Question

我正在尝试使用此库getStream

现在他们有一个angular-cli快速启动here

但我不知道我的生活会弄清楚如何让它发挥作用..

当您加载项目时，没有关于如何使它在角度应用程序中工作的真实文档

文件结构就是这样..

src
│   README.md
│   angular.cli.json
|   ...  
│
└───App
    │   app.module.ts
    │   app.component.ts
    |   stream.service.ts
    |   stream-activity.model.ts
    │   ...
    |   
    └───feed-activity
    |   │   feed-activity.component.html
    |   │   feed-activity.component.ts
    |   │   ...
    |    
    └───feed-activity-list
            │   feed-activity-list.component.html
            │   feed-activity-list.component.ts
            |   ...

现在在 stream.service.ts 中你有..

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

import * as stream from 'getstream';
import { StreamActivity } from './stream-activity.model';

@Injectable()
export class StreamService {
  client: stream.Client;

  constructor() {
    // Instantiate a new client (client side)
    this.client = stream.connect(
      environment.STREAM_APP_KEY,
      null,
      environment.STREAM_APP_ID);
  }

  getFeed(): Promise<StreamActivity[]> {
    // Instantiate the feed via factory method
    const feed = this.client.feed(
      environment.STREAM_FEED_GROUP,
      environment.STREAM_FEED_ID,
      environment.STREAM_FEED_READ_ONLY_TOKEN);

    // Fetch the feed and pick the results property off the response object
    return feed.get().then(response => response['results']);
  }
}

并在 feed-activity-list.ts

中

import { Component, OnInit } from '@angular/core';

import { StreamService } from '../stream.service';
import { StreamActivity } from '../stream-activity.model';

@Component({
  selector: 'app-feed-activity-list',
  templateUrl: './feed-activity-list.component.html',
  styleUrls: ['./feed-activity-list.component.scss']
})
export class FeedActivityListComponent implements OnInit {
  activities: StreamActivity[] = [];

  constructor(
    private streamClient: StreamService
  ) { }

  ngOnInit() {
      this.streamClient.getFeed().then(activities => {
        console.log('Service promise resolved: ', activities);
        this.activities = activities;
      });
  }

}

然后 feed-activity.component.ts

import { Component, Input, OnInit } from '@angular/core';

import { StreamActivity } from '../stream-activity.model';
import { StreamService } from '../stream.service';

@Component({
  selector: 'app-feed-activity',
  templateUrl: './feed-activity.component.html',
  styleUrls: ['./feed-activity.component.scss']
})
export class FeedActivityComponent implements OnInit {
  @Input() activity: StreamActivity = new StreamActivity();

  constructor(
    private _StreamActivity: StreamActivity,
    private _streamService: StreamService
  ) { }

  ngOnInit() {
  }

}

现在根据js的快速入门指南

var chris = client.feed('user', 'chris');

// Add an Activity; message is a custom field - tip: you can add unlimited 
// custom fields!
chris.addActivity({
  actor: 'chris',
  verb: 'add',
  object: 'picture:10',
  foreign_id: 'picture:10',
  message: 'Beautiful bird!'
}).then(
  null, // nothing further to do
  function(err) {
    // Handle or raise the Error.
  }
);

现在我不确定在哪里可以使用此代码来实现此功能...我尝试在 Feed-activity组件中执行此操作

ngOnInit() {
    const user = this._streamService.client.feed('user', 'user');

    user.addActivity({
      actor: 'user',
      verb: 'add',
      message: 'Beautiful bird!'
    }).then(
      null,
      function(err) {
        console.log(err);
      }
    );
  }

但这似乎没有做任何事情？

我想知道是否有人在将angular.io实现到有角度的应用程序中有任何成功吗？

任何帮助将不胜感激！

Answer 1

添加活动需要读/写令牌。此演示项目仅用于“读取”Feed，因此不包含此类令牌（请参阅environments.ts）。

这解释了为什么在将修订后的ngOnInit函数添加到feed-activity.component后，通过Promise拒绝处理程序打印以下错误：

FeedError {message：“缺少令牌，在客户端模式下请提供Feed密码”，...}

读/写令牌应该在安全区域（例如后端应用程序）中生成，适合存储和使用API密钥和API密钥。

让getStream（stream.io）在角度应用程序中工作

1 个答案: