Question

我不明白为什么我无法在Angular应用程序的两个组件之间传递数据。这是我的东西，但是子组件返回“未定义”

我创建了一个对象数组，该对象数组仅包含一个名为profileFeedPosts的字符串，然后尝试将其作为“ Post”对象数组传递给另一个组件。

profile-feed是父级，而public-feed是子级。也许我缺少有关在Angular中构造父/子组件的方式的一些信息？

父组件：

 import { Component} from '@angular/core';
 import { Post } from "../models/post.model"



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

      postBody = null;

      profileFeedPosts: Post[] = [
        new Post("hello")
      ];

      showPostBody(){
        this.postBody = 1;
      }

      createPost(){
        this.postBody = null;
      }

      postSubmitted(post: string){
        const newPost = new Post(post);
        this.profileFeedPosts.push(newPost);
      }

      constructor() { }

      ngOnInit() {
      }

    }

父组件HTML：

<div class="post-body" *ngIf="postBody">
  <input id="post" type="text" #userPost placeholder="What's up?">
  <button (click)="createPost(); 
postSubmitted(userPost.value);">Share</button>
</div>
<app-public-feed [childFeedPosts]="profileFeedPosts"></app-public- 
feed>

子组件：

    import { Component, Input } from '@angular/core';
    import { Post } from '../models/post.model';


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

    export class PublicFeedComponent {

      @Input() childFeedPosts: Post[];




      constructor() { }

      ngOnInit() {
      }

    }

    console.log(this.childFeedPosts);

Answer 1

您已将console.log放置在组件类之外的全局范围内，其中this.childFeedPosts不存在。

尝试在console.log方法内移动PublicFeedComponent.ngOnInit。

如何在角度分量之间传递数据？

1 个答案: