Angular 4 - 从 parent 到 child 组件的事件绑定

Question

这是我的 html parent 组件模板。自定义标记包括我的 child 组件以显示 post objects 我已经连接了快速服务器，所有查询都是通过 HTTP 服务完成的。每次我添加新的 post object 时，UI 都不会更新。

我知道我需要将事件传递给child组件，但到目前为止我还没有成功。

/* app.component.html */ 在此模板中，我尝试将方法与 (onAdded)="onAdded($event)"

绑定

<div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto links">   
      <li class="nav-item">
        <a class="btn btn-secondary" routerLink="/posts" href="javascript:void(0);" (click)="addToBoard()"> <i class="fa fa-plus-square fa-3x" aria-hidden="true"></i></a>
      </li>
    </ul>

  </div>

</div>

/* app.component.ts (PARENT)*/

import { Component, OnInit, **EventEmitter, Output**} from '@angular/core';
import { Post } from './shared/post';
import { PostService } from './services/post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PostService]
})
export class AppComponent implements OnInit  {
  @Output() onAdded = new EventEmitter<Post>();
  title = 'Post it Board';
  posts: Post[];
  private newPost :Post;
  constructor(private postService: PostService) { }

  ngOnInit(): void {
    this.getPosts()
    this.newPost = {
      text: 'some text',
      _id: ''

    }
  }


  addToBoard(): void {
    this.postService.addPost(this.newPost).subscribe(
      response=> {
          if(response.success== true)
             //If success, update the view-list component
             console.log('success')
             **this.onAdded.emit(this.newPost);**
      },
   );
  }

  getPosts() {
    this.postService.getAllPosts().subscribe(
        response => this.posts = response,)   
  }

}

/view-board.component.ts (CHILD)/

import { Component, OnInit} from '@angular/core';
import { Post } from '../shared/post';
import { POSTS } from '../shared/mock-posts';
import { PostService } from '../services/post.service';

@Component({
  selector: 'view-board',
  templateUrl: './view-board.component.html',
  styleUrls: ['../css/style.css'],
  providers: [PostService]
})
export class ViewBoardComponent implements OnInit {

  title = "Post it"
  posts: Post[];
  constructor(private postService: PostService) { }

  ngOnInit() {
    this.getPosts()
  }

  getPosts() {
    this.postService.getAllPosts().subscribe(
        response => this.posts = response,)   
  }

  **onAdded(post: Post) {
    console.log('new post added ' + post.text)
    this.posts = this.posts.concat(post);
  }**

}

感谢您的帮助！

Answer 1

不，如果你想从子元素传递到父元素，你必须做事件发射，在这种情况下，你可以作为输入传递给子元素。

父组件内部。

<view-board [success]="success">

并且在您的子组件中，

@Input() success: string;

Angular 4 - 从 parent 到 child 组件的事件绑定

Angular 4 - event binding from parent to child component

event-binding

eventemitter

angular