javascript - 表单和列表分离的组件

Question

我在提交表单后尝试创建模型时遇到问题，我没有使用任何 api，我正在尝试在没有数据库或其他任何东西的情况下在本地制作匿名的“Twitter Like”。我正在使用数组将我的“推文”存储在 TweetList.component.ts 中。我不知道如何将我的 TweetList 与表单同步。我在考虑 EventEmitter，但似乎还不够。我不知道如何依赖我的表格和推文列表。

两者都是从另一个组件“tweets.component.ts”调用的，在我看来这是一个“ View ”。

tweetform.component.ts :

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

import { Tweet } from '../tweet/tweet.component';

@Component({
    selector: 'tweetform'
})
export class TweetFormComponent{
    private auteur: string;
    private message: string;
    private model: Tweet;

    onSubmit(){
        this.model = new Tweet(this.auteur, this.message);
        this.auteur = "";
        this.message = "";
    }
}

tweetform.component.html :

<form (ngSubmit)="onSubmit()" #tweetform="ngForm">
    <div class="form-group">
        <label for="auteur">Auteur :</label>
        <input type="text" id="auteur" [(ngModel)]="tweetform.auteur" name="auteur" required>
    </div>
    <div class="form-group">
        <label for="message">Message :</label>
        <input type="text" id="message" [(ngModel)]="tweetform.message" name="message" required>
    </div>
    <button type="submit" class="btn btn-success">Envoyer !</button>
</form>

<p> Auteur: {{ tweetform.model.getAuteur() }} / Message: {{ tweetform.model.getMessage() }}

tweetlist.component.ts :

import { Component } from '@angular/core';
import { Tweet } from "../tweet/tweet.component";

@Component({
    selector: 'tweetlist',
    templateUrl: 'app/tweets/tweetlist.component.html'
})
export class TweetListComponent{
    private tweets: Tweet[];

    constructor(){
        this.tweets=[new Tweet('Jokoast','Salut tout le monde')];
    }
}

tweetlist.component.html :

<div class="pre-scrollable">
    <div class="well-sm" *ngFor="let tweet of tweets"><span class="label label-success">{{ tweet.getAuteur() }}</span> {{ tweet.getMessage() }}</div>
</div>

---

现在我有一个关于模板的问题。

There is no directive with "exportAs" set to "ngForm"

我找到的所有帮助都是关于 Angular 2 和导入表单的，但它在 Angular 4 中不起作用。知道吗？ (也许我应该开一个新话题，让你们中的一个人回答主要问题？)

angular.io 文档示例:从'@angular/forms'导入{FormsModule}

再次感谢您的帮助。

杰里米。

Answer 1

您应该制作一个单独的 tweets.service。该服务将负责获取和存储您的数据。无论您是从 API 还是仅从内部列表获取它都没有关系。

让服务完成所有数据工作并将其注入(inject)您的组件(不要忘记在您的组件元数据中将其设置为提供者)。始终使用服务来传递数据。

您的组件代码:

import { TweetService }        from './tweet.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  providers: [ TweetService ]
})
export class AppComponent {

  // You can inject service like this in other components too
  constructor(private tweetService: TweetService) {
     // Do your stuff
  }

}

如果您为表单问题设置另一个问题并标记我，那么我也会看一下。