AppComponent中的ERROR不能用作条目组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AppComponent中的ERROR不能用作条目组件相关的知识,希望对你有一定的参考价值。

嘿,我是使用Angular和Web开发的新手,我一直在学习一些教程。

在尝试合并使用我的Firebase数据库时,在本地编译(使用ng服务)时,我的应用程序失败了。返回:“AppComponent不能用作条目组件”

如果你能提供任何帮助,那将是伟大的。提前致谢 :)

//app.component.ts
import { Component } from '@angular/core';
import {AuthService} from "./services/auth.service";
import {Router} from "@angular/router";
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireList } from 'angularfire2/database';

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

class Event {
  constructor(public title) { }
}


export class AppComponent {
  title = 'qoqa';
  private eventCounter = 0;
  public events:AngularFireList<Event[]>;
  constructor(db: AngularFireDatabase, private authService: AuthService, private router: Router) {
    this.events= db.list('/events');
  }
  public AddEvent(): void {
    let newEvent = new Event(`My event #${this.eventCounter++}`);
    this.events.push([newEvent]);
  }
  signInWithFacebook() {
    this.authService.FacebookSignIn()
      .then((res) => {
        //this.router.navigate(['dashboard'])
      })
      .catch((err) => console.log(err));
  };
  signInWithGoogle() {
    this.authService.GoogleSignIn()
      .then((res) => {
        //this.router.navigate(['dashboard'])
      })
      .catch((err) => console.log(err));
  }
}

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';
import { LoginComponent } from './login.component';
import { AppRoutingModule } from './app-routing';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AuthService } from './services/auth.service';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CreateEventComponent } from './create-event/create-event.component';
import { EventsComponent } from './events/events.component';
import { ProfileComponent } from './profile/profile.component';
import { SavedEventsComponent } from './saved-events/saved-events.component';
import { InvitationsComponent } from './invitations/invitations.component';
import { CreateQoqaComponent } from './create-qoqa/create-qoqa.component';



@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    CreateEventComponent,
    EventsComponent,
    ProfileComponent,
    SavedEventsComponent,
    InvitationsComponent,
    CreateQoqaComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AppRoutingModule,
    BrowserModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }
答案

@Component装饰应该用在AppComponent而不是Event

还要检查在AppComponent上宣布AppModule

另一答案

我只是想提供@ibenjelloun解释的问题的一个例子。

@Component({ ... })虽然看起来有点像函数,但它是一个装饰器,所以它必须在你希望Angular作为一个组件处理的类之前。因此,请确保不要在@Component({ ... })export class YourComponent之间放置类。

所以将Event移到AppComponent之前/之后:

class Event {
    constructor(public title) { }
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    ...

以上是关于AppComponent中的ERROR不能用作条目组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在另一个组件中获取指令/组件实例?

不能将 UUID 用作主键:Uuid:diesel::Expression 不满足 [重复]

如何在应用程序首先加载而不是Angular 5中的appComponent时显示登录组件

调用 @Environment 时收到错误“类 'Environment' 不能用作属性”

错误:类“SingleTickerProviderStateMixin”不能用作混合,因为它扩展了 Object 以外的类

Angular:如何将组件用作路由条目和另一个组件的模板