Правильное использование потоков в AngularDart

Question

У меня возникают трудности с использованием потоков для обновления моих просмотров.

В настоящее время есть представление, которое отображает все сообщения, и форма для создания сообщений. После отправки сообщения console.log() отображает вновь созданное сообщение, но представление не отображает его. Скорее всего, это неправильное использование потоков.

Это текущий код

post_create_component.dart:

class PostCreateComponent {
  final PostListService postListService;

  PostCreateComponent(this.postListService);

  onAddPost(NgForm form) {
    Post post = Post(form.value["title"], form.value["content"]);
    this.postListService.addPost(post);
  }
}

post_list_component.dart

class PostListComponent implements OnInit, OnDestroy {
  final PostListService postListService;
  StreamSubscription<List<Post>> _postsSubscription;
  List<Post> postList = [];

  PostListComponent(this.postListService);

  @override
  ngOnInit() {
    this.postList = this.postListService.getPostList();
    this._postsSubscription = this
        .postListService
        .getPostUpdateListener
        .listen((List<Post> posts) => this.postList = posts);
  }

  ngOnDestroy() {
    _postsSubscription.cancel();
  }
}

post_list_service.dart

@Injectable()
class PostListService {
  List<Post> _postList = <Post>[Post("hello", "world")];
  final _postUpdated = new StreamController<List<Post>>();

  List<Post> getPostList() {
    return List.from(this._postList);
  }

  @Output()
  Stream<List<Post>> get getPostUpdateListener {
    return _postUpdated.stream;
  }

  addPost(Post post) {
    this._postList.add(post);
    this._postUpdated.add(List.from(this._postList));
    window.console.log(List.from(this._postList));
  }
}

и console.log отображает следующее:

(2) [s…l.P…t.new, s…l.P…t.new]
0: src__post_model.Post.new {Symbol(Post.title): "hello", Symbol(Post.content): "world"}
1: src__post_model.Post.new {Symbol(Post.title): "world", Symbol(Post.content): "hello"}
length: 2
Symbol(dartx.first): (...)
Symbol(dartx.hashCode): (...)
Symbol(dartx.isEmpty): (...)
Symbol(dartx.isNotEmpty): (...)
Symbol(dartx.iterator): (...)
Symbol(dartx.last): (...)
Symbol(dartx.length): (...)
Symbol(dartx.reversed): (...)
Symbol(dartx.runtimeType): (...)
Symbol(dartx.single): (...)
__proto__: Array

Любые советы высоко ценится.

ОБНОВИТЬ

Так что мой post_list_component.html, post_create_component.html, app_component.html файлы следующие:post_list_component.html

<section *ngIf="postList.isNotEmpty">
    <material-expansionpanel *ngFor="let post of postList" name="{{post.title}}" [showSaveCancel]="false">
        {{post.content}}
    </material-expansionpanel>
</section>

<material-expansionpanel *ngIf="postList.isEmpty" name="No messages" [showSaveCancel]="false" disabled>
    No Messages :(
</material-expansionpanel>

post_create_component.html этот компонент может нуждаться в исправлении, но сейчас я хочу сосредоточиться на правильном получении реализации в первую очередь

<section class="data-entry">
  <h2>Post Comments</h2>
  <div class="mdc-card demo-size">
    <form #postForm="ngForm" (ngSubmit)="onAddPost(postForm)">
      <material-input
        autoFocus
        label="Title"
        floatingLabel
        class="wide"
        ngControl="title"
        required
        name="title"
        ngModel
        #title
        requiredErrorMsg="Enter a title"
      >
      </material-input>
      <material-input
        label="Content"
        floatingLabel
        class="wide"
        ngControl="content"
        required
        name="content"
        ngModel
        #content
        requiredErrorMsg="Enter a message"
      >
      </material-input>
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <material-button
            raised
            type="submit"
            [disabled]="!postForm.form.valid"
            (trigger)="onAddPost(postForm)"
            >Save Post</material-button
          >
        </div>
      </div>
    </form>
  </div>
</section>

app_component.html

<app-header></app-header>
<div class="app-body">
    <app-post-create></app-post-create>
    <app-post-list></app-post-list>
</div>

ОБНОВЛЕНИЕ 2

app_component.dart

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [PostCreateComponent, PostListComponent, HeaderComponent],
  providers: [ClassProvider(PostListService), materialProviders],
)
class AppComponent {}

Answer 1

Если кто-то сталкивался с этим в будущем, проблема заключалась в том, что провайдеры были установлены на обоих компонентах, что фактически создает новые экземпляры самой службы. Таким образом, он не разделял один и тот же сервис между двумя компонентами. Решение состояло в том, чтобы переместить провайдера на более высокий уровень в дереве компонентов.

Answer 2

Вы не должны использовать аннотацию @Output в сервисах, правильный код должен выглядеть так:

@Injectable()
class PostListService {
  final _postUpdated = StreamController<List<Post>>.broadcast();
  final _postList = [Post("hello", "world")];

  Stream<List<Post>> get postUpdated => _postUpdated.stream;
  List<Post> get postList => _postList.toList();

  void addPost(Post post) {
    _postList.add(post);
    _postUpdated.add(_postList.toList());
    window.console.log(_postList.toList());
  }
}

и в компоненте:

class PostListComponent implements OnInit, OnDestroy {
  final PostListService _postListService;

  StreamSubscription<List<Post>> _postsSubscription;
  List<Post> postList = [];

  PostListComponent(this.postListService);

  @override
  void ngOnInit() {
    postList = this.postListService.postList;
    _postsSubscription = _postListService.postUpdated
        .listen((posts) => postList = posts);
  }

  @override
  void ngOnDestroy() {
    _postsSubscription.cancel();
  }
}

Не относящийся к теме, я хотел бы предложить проверить руководство по стилю дротиков и угловых - https://www.dartlang.org/guides/language/effective-dart