通过模板将数据从父级传递到子级 [英] Passing data from Parent to Child via template

问题描述

我有一个如下的模板用户:

I have a template user like following:

<div class="jumbotron">
  <div class="container">
    <h2><i class="fa fa-user"></i> {{username}}</h2>
    <p><i class="fa fa-star"></i> {{reputation}}</p>
  </div>
</div>
<app-list user={{username}}"></app-list>

我的应用列表组件如下:

My component for app-list looks like:

export class ListComponent implements OnInit {
  @Input() user: string;

  constructor() { }

  ngOnInit() {   
    console.log(this.user);
  }  

}

页面上正确显示了用户名和声誉.但是，用户名值未正确传递到子组件app-list，因为它只打印出一个空字符串.

The username and reputation is correctly shown on the page. However the username value is not passed correctly to the sub component app-list as it only print out an empty string.

如何将用户名传递给应用程序列表组件?

How can I pass the username to the app-list component?

修改

用户组件如下:

export class UserComponent implements OnInit {

  private username: string;
  private reputation: number;

  constructor(private route: ActivatedRoute, private apiService: ApiService) {
  }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => (
      this.apiService.getUser(params['username']).subscribe((response: Response) => {
          console.log(response.json());
          this.username = response.json().username;
          this.reputation = response.json().reputation;
        }, (error) => {
          if (error.status === 404) {
            // Todo: redirect to 404 page
          }
        }
      )
    ));
  }

}

推荐答案

应该是

<app-list [user]="username"></app-list>

这篇关于通过模板将数据从父级传递到子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！