如何在angular中保持一个恒定的作用域？

<!-- 父组件 -->
<app-child [data]="parentData"></app-child>

<!-- 子组件 -->
<p>{{ data }}</p>

// 服务
@Injectable()
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

// 组件
@Component({
  selector: 'app-child',
  template: '<p>{{ data }}</p>'
})
export class ChildComponent {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

// 路由配置
const routes: Routes = [
  { path: 'child/:data', component: ChildComponent }
];

// 组件
@Component({
  selector: 'app-child',
  template: '<p>{{ data }}</p>'
})
export class ChildComponent {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.data = this.route.snapshot.paramMap.get('data');
  }
}