AngularDart: использование потоков вместо событий EventEmit - PullRequest
Новая
       7

AngularDart: использование потоков вместо событий EventEmit

0 голосов
/ 15 сентября 2018

Я портирую угловое приложение на angulardart и сталкиваюсь с некоторыми проблемами, когда дело касается EventEmitter.

Мой текущий .ts file выглядит следующим образом: 

import { Component, EventEmitter } from "@angular/core";

@Component({
  selector: "app-post-create",
  templateUrl: "./post-create.component.html",
  styleUrls: ["./post-create.component.css"]
})

export class PostCreateComponent {
  enteredTitle = "";
  enteredContent = "";
  postCreated = new EventEmitter();

  onAddPost() {
    const post = {
      title: this.enteredTitle,
      content: this.enteredContent
    };
    this.postCreated.emit(post);
  }
}

Согласноболее старая запись, EventEmitter устарела и не должна использоваться .

Мой текущий .dart file выглядит так: 

import 'dart:async';

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'app-post-create',
  styleUrls: ['post_create_component.css'],
  templateUrl: 'post_create_component.html',
  directives: [
    MaterialButtonComponent,
    materialInputDirectives,
    formDirectives
  ],
  providers: [],
)
class PostCreateComponent {
  String enteredTitle = '';
  String enteredContent = '';
  final _postCreatedController = new StreamController<String>();

  @Output
  Stream<String> get postCreated => _postCreatedController.stream;

  onAddPost() {
    Map<String, String> post = {
      'title': this.enteredContent,
      'content': this.enteredContent
    };
  }
}

Мой файл дротика должен бытьфиксированный.Я не использую поток правильно.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 16 сентября 2018

Следующее сработало для меня.Вы можете использовать StreamController.broadcast ().

Затем вы можете добавить свой объект в метод add (). 

@Component(
  selector: 'new-post',
  directives: [coreDirectives, 
                formDirectives,
                FileUploader,
                materialInputDirectives,
                MaterialButtonComponent],
  templateUrl: 'post_new_component.html',
  styleUrls: ['post_new_component.css'],
  providers: [ClassProvider(PostService)]
)
class PostNewComponent {
  final PostService _postService;
  final _onDone = new StreamController.broadcast();

  String postText;
  Post post;

  @Input()
  Place place;

  @Output()
  Stream get doneIt => _onDone.stream;

  PostNewComponent(this._postService);

  Future<void> save() async {
    await _postService.create(postText,place.id).then(((_) => _onDone.add(1)));
  }
}

В html вы можете указать событие doneIt, которое вызывает функцию. 

<new-post (doneIt)="loadPosts()" [place]="place"></new-post>

В родительском файле компонента dart вы можете добавить такую ​​функцию: 

 Future<void> loadPosts() async {
    print("broadcast received");
  }

Я думаю, что вы можете использовать loadPosts ($ event) для передачи события, но это то, что вы все равноВозьмите чек самостоятельно.

Надеюсь, это поможет.Если бы подобный вопрос был размещен здесь:

Как уведомить родительский компонент об изменении и обновлении представления

...