通過模板

Question

從父將數據傳遞給孩子，我有一個模板，用戶喜歡以下內容：

​​

我的應用程序列表組件的樣子：

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

    constructor() { } 

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

} 

用戶名和聲譽是正確顯示在這一頁。但是，用戶名值未正確傳遞到子組件應用程序列表，因爲它只打印出一個空字符串。

如何將用戶名傳遞給應用程序列表組件？

編輯

用戶組件的樣子：

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

} 

Answer 1

它應該是，

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

Answer 2

或者您可以使用@ViewChild()裝飾來達到以下

export class UserComponent implements OnInit { 
@ViewChild(AppListCopmonent) appList: AppListComponent; 

    ngOnInit() { 
     this.appList.user = this.username 
} 
} 

更新基於聊天：將值前檢查數據是否存在作爲

this.apiService.getUser(params['username']).subscribe((response: Response) => {  
    if(response){ 
     console.log(response.json()); 
     this.username = response.json().username; 
     this.reputation = response.json().reputation; 
    });