要创建一个Angular 6消息应用程序,您可以按照以下步骤进行操作:
创建一个新的Angular项目: 打开命令行界面,导航到您想要创建项目的目录,并运行以下命令:
ng new angular6-messaging-app
这将创建一个名为angular6-messaging-app的新的Angular项目。
导航到项目目录: 运行以下命令以导航到项目目录:
cd angular6-messaging-app
创建一个新的消息组件: 运行以下命令以生成一个新的组件:
ng generate component message
这将在src/app目录中创建一个名为message的新组件。
在Message组件模板中添加HTML和样式:
打开src/app/message/message.component.html文件,并添加以下代码:
  Messages
  
    - {{ message }}
这将创建一个包含消息列表、输入框和发送按钮的简单HTML模板。
在Message组件类中添加逻辑:
打开src/app/message/message.component.ts文件,并添加以下代码:
import { Component } from '@angular/core';
@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent {
  messages: string[] = [];
  newMessage: string = '';
  sendMessage() {
    if (this.newMessage) {
      this.messages.push(this.newMessage);
      this.newMessage = '';
    }
  }
}
这将创建一个包含messages数组和newMessage变量的组件类,并添加了一个sendMessage方法,用于将新消息添加到数组中。
在App组件模板中添加Message组件:
打开src/app/app.component.html文件,并添加以下代码:
  这将在应用程序模板中添加一个
运行应用程序: 返回命令行界面,并运行以下命令以启动应用程序:
ng serve
这将启动开发服务器,并在浏览器中显示应用程序。
现在,您可以通过在输入框中键入消息并点击发送按钮来测试该应用程序。每次发送消息时,它都会将消息添加到列表中。