表单和列表分离的组件

Question

我在提交表单后尝试创建模型时遇到问题，我没有使用任何 api，我正在尝试在没有数据库的情况下在本地创建匿名 "Twitter Like" 或还要别的吗。我正在使用数组将我的 "tweets" 存储在 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 文档示例： import { FormsModule } from '@angular/forms'

谢谢你的帮助，再来一次。

杰里米。

Answer 1

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

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

您的组件代码：

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
  }

}

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

表单和列表分离的组件

Form and List separated components

javascript

angular2-services

angular-components

angular