Angular练习遇TS2341错误：私有属性无法在模板访问，求排查解决

你碰到的这个TS2341错误其实很常见，根源就在组件里注入服务的方式上。让我给你拆解一下问题，再给出几种解决办法：

问题原因分析 #

当你在ArticlesComponent的构造函数里写private articles : ArticleService时，TypeScript会自动把articles变成这个类的私有属性——这意味着它只能在ArticlesComponent的内部代码里被访问，而Angular的模板（也就是你的.html文件）是没有权限访问类的私有成员的，所以就抛出了这个错误。

解决方案1：将服务实例改为公共属性 #

最简单的修复方式就是把构造函数里的private改成public，这样模板就能直接访问这个服务实例了：

// articles.component.ts
export class ArticlesComponent implements OnInit {
  // 把private改成public
  constructor(public articles : ArticleService) { }

  ngOnInit(){
    this.articles.getAll();
  }
}

修改之后，你的模板<h3>Repositorios : {{articles.articlesCount}}</h3>就能正常工作了。

解决方案2：封装私有服务，暴露公共属性（更推荐） #

如果你想遵循封装原则，不想把整个服务实例暴露给模板，可以在组件里单独定义一个公共属性，把服务里的articlesCount值传递过去：

// articles.component.ts
export class ArticlesComponent implements OnInit {
  // 定义公共属性用于模板绑定
  public articleCount: number;

  constructor(private articles : ArticleService) { 
    // 初始化时从服务获取数值
    this.articleCount = this.articles.articlesCount;
  }

  ngOnInit(){
    this.articles.getAll();
  }
}

然后修改模板，绑定这个组件自己的公共属性：

<h3>Repositorios : {{articleCount}}</h3>

额外优化：让数值与API返回同步 #

另外注意一下，你现在服务里的articlesCount是硬编码的30，后续调用API获取仓库数据后，记得更新这个值，这样模板显示的才是真实的仓库数量。比如修改服务的getAll方法：

// article.service.ts
public getAll(){
  this.http.get('https://api.github.com/users/codigofacilito/repos').subscribe(data=> {
    console.log(data);
    // 假设API返回的是仓库数组，取数组长度更新articlesCount
    this.articlesCount = (data as Array<any>).length;
  })
}

内容的提问来源于stack exchange，提问作者Juan Attorri