要创建一个Angular Firebase后台消息系统，你可以按照以下步骤进行操作：

1. 创建一个新的Angular项目：

ng new angular-firebase-messages
cd angular-firebase-messages

2. 安装Firebase依赖项：

npm install firebase @angular/fire

3. 在Firebase控制台创建一个新的Firebase项目，并获取项目凭据。

4. 在Angular项目中配置Firebase：

在src/environments目录下创建两个环境文件：environment.ts和environment.prod.ts，并将Firebase凭据添加到这两个文件中。

environment.ts：

export const environment = {
  production: false,
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
  }
};

environment.prod.ts：

export const environment = {
  production: true,
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
  }
};

请确保将上述凭据替换为你在Firebase控制台中创建的凭据。

5. 在Angular中配置Firebase模块：

在src/app/app.module.ts文件中导入Angular Fire模块，并在imports数组中添加AngularFireModule和AngularFirestoreModule模块：

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';

...

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. 创建一个消息服务：

在src/app目录下创建一个名为message.service.ts的文件，并添加以下代码：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Message {
  content: string;
  timestamp: number;
}

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messagesCollection: AngularFirestoreCollection;
  private messages: Observable;

  constructor(private afs: AngularFirestore) {
    this.messagesCollection = this.afs.collection('messages');
    this.messages = this.messagesCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data() as Message;
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  getMessages() {
    return this.messages;
  }

  addMessage(message: Message) {
    return this.messagesCollection.add(message);
  }
}

这个服务将负责从Firestore数据库获取消息并向其添加新消息。

7. 创建一个组件来显示和添加消息：

在src/app目录下创建一个名为messages.component.ts的文件，并添加以下代码：

import { Component, OnInit } from '@angular/core';
import { Message, MessageService } from '../message.service';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
  messages: Message[];
  newMessage: string;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.messageService.getMessages().subscribe(messages => {
      this.messages = messages;
    });
  }

  addMessage() {
    if (this.newMessage) {
      const message: Message = {
        content: this.newMessage,
        timestamp: Date.now()
      };
      this.messageService.addMessage(message);
      this.newMessage = '';
    }
  }
}

这个组件将显示已保存的消息，并允许用户添加新消息。

8. 创建一个HTML模板来显示消息列表和添加消息的表单：

在src/app目录下创建一个名为messages.component.html的文件，并添加以下代码：

Angular Firebase Messages