Angular 4中如何通过App组件访问私有属性？附当前URL代码

嘿，我来帮你搞定这个问题！你现在的代码里，router是构造函数里声明的私有依赖，Angular的模板没办法直接访问组件类的私有成员，所以模板里写{{router.url}}肯定拿不到值，这就是核心问题所在。

下面给你两种靠谱的解决方案，既符合封装原则，又能实现你获取当前URL的需求：

方案1：用Getter方法暴露路由URL（推荐） #

这种方法不需要修改依赖的访问权限，而是通过公共的getter来间接获取私有依赖的属性，完美保持封装性：

修改你的app.component.ts：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  
  constructor(private router: Router) {}

  // 定义公共getter，暴露当前路由URL
  get currentRouteUrl(): string {
    return this.router.url;
  }
}

然后修改app.component.html，使用这个getter：

<div class="page-wrap {{currentRouteUrl}}">
<!-- 其他内容 -->
</div>

这个方法的好处是，每次模板渲染时都会自动调用getter，路由变化时URL会实时更新，不需要额外的监听逻辑。

方案2：通过公共属性同步URL #

如果你已经定义了href这个公共属性，也可以在组件初始化时（或监听路由变化时）把URL赋值给它：

修改app.component.ts的ngOnInit方法：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public href: string = "";
  
  constructor(private router: Router) {}

  ngOnInit() {
    // 初始化时获取当前URL
    this.href = this.router.url;
    
    // 监听路由变化，实时更新URL（如果需要的话）
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.href = event.url;
    });
  }
}

模板里直接用你定义的href属性：

<div class="page-wrap {{href}}">
<!-- 其他内容 -->
</div>

这种方法适合需要把URL存下来做其他逻辑处理的场景，但如果只是模板展示，方案1会更简洁。

补充说明 #

为什么不能直接访问私有属性？
Angular的模板绑定是基于组件类的公共API设计的，TypeScript的私有成员（用private修饰）只能在类内部访问，模板属于类外部的上下文，所以无法直接调用。保持依赖的私有性是好的编程习惯，能避免模板直接依赖组件内部实现，让代码更易维护。

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