angular - 在AngularDart中正确使用流

Question

我在使用Streams更新我的 View 时遇到困难。

当前具有一个显示所有帖子的 View ，以及一个用于创建帖子的表单。提交帖子后，console.log()将显示新创建的帖子，但 View 不会呈现它。最有可能是流的滥用。

这是当前代码
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

如果将来有人碰到这个问题，那么问题是这两个组件都设置了提供程序，这实际上创建了服务本身的新实例。因此，这两个组件之间没有共享相同的服务。解决方案是将提供程序移到组件树中的更高位置。