我无法在 Angular 中使用 Output 和 EventEmitter 在应用程序组件中获取 component(post) 的属性

Question

它说 any 类型的参数不可赋值。
我应该在 app.component 中导入其他内容吗？
你能告诉我我做错了什么吗？ app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';
  posts=[];
  onAddedPost(post){
    this.posts.push(post)
  }
}

问题来了。 onAddedPost 中的 post 是问题所在。 post-create.component.ts

import { sharedStylesheetJitUrl } from '@angular/compiler';
import { Component, EventEmitter, Injectable, Output, OutputDecorator } from '@angular/core';
@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent {
  enteredContent='';
  enteredTitle='';
  @Output() postCreated = new EventEmitter();
  onAddPost(){
    const post={title:this.enteredTitle,content:this.enteredContent};
    this.postCreated.emit(post);
  }

}

app.component.html

<app-header></app-header>
<main>
<app-post-create (postCreated)="onPostAdded($event)" ></app-post-create>
<app-post-list [posts]="storedPosts"></app-post-list>
</main>

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
      HeaderComponent,
      PostListComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,

  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

或许您可以创建一个 class Post 并将其用于您的 EventEmitter。

export class Post {
    title: string;
    content: string;
}

@Output() postCreated = new EventEmitter<Post>();

Answer 2

很可能是 TSLint 错误，因为它无法推断类型。注意：这不会影响应用程序，因为编译后的 JS 无法识别 TS 类型。

但是要解决它，您可以定义一个类型的 Typescript 接口。

定义模型

post.ts

export interface Post {
  title?: string;
  content?: string;
}

使用此模型在两个组件中定义类型。

post-create.component.ts

import { sharedStylesheetJitUrl } from '@angular/compiler';
import { Component, EventEmitter, Injectable, Output, OutputDecorator } from '@angular/core';

import { Post } from './post';

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent {
  enteredContent='';
  enteredTitle='';

  @Output() postCreated: EventEmitter<Post> = new EventEmitter<Post>();

  onAddPost(){
    const post: Post = {
      title: this.enteredTitle,
      content: this.enteredContent
    };
    this.postCreated.emit(post);
  }
}

app.component.ts

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

import { Post } from './post';

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

  onAddedPost(post: Post) {
    this.posts.push(post);
  }
}

我无法在 Angular 中使用 Output 和 EventEmitter 在应用程序组件中获取 component(post) 的属性

I cannot get the a property of component(post) in the app component using Output and EventEmitter in Angular

angular-directive

angular

我无法在 Angular 中使用 Output 和 EventEmitter 在应用程序组件中获取 component(post) 的 属性

I cannot get the a property of component(post) in the app component using Output and EventEmitter in Angular

angular-directive

angular

我无法在 Angular 中使用 Output 和 EventEmitter 在应用程序组件中获取 component(post) 的属性