代码之家  ›  专栏  ›  技术社区  ›  user4422315

角度4-从父组件到子组件的事件绑定

  •  1
  • user4422315  · 技术社区  · 8 年前

    自定义标记包括my child组件以显示post对象 我已经连接了express server,所有查询都是通过HTTP和服务完成的。 每次我添加一个新的post对象时,UI都不会更新。

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

    在这个模板中,我试图用(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>
    

    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,)   
      }
    
    }
    

    / 查看板。组成部分ts(儿童) /

    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);
      }**
    
    }
    

    谢谢你的帮助!

    1 回复  |  直到 8 年前
        1
  •  0
  •   Sajeetharan    8 年前

    不,如果您想从子元素传递到父元素,您必须执行事件发射,在这种情况下,您可以将其作为输入传递给子元素。

    在父组件内部。

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

    在您的子组件中,

    @Input() success: string;