Question

如何在没有共享服务的情况下访问或更新其他组件变量

我有这两个组件

注意：这些组件不是父/子

组件1： src / app / ABC / one / more / step / C1.component.ts

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

@Component({
  selector: 'app',
  templateUrl: './C1.component.html',    
})

export class C1Component implements OnInit {


  x1:any;

  constructor() 


  ngOnInit() {    
  }

}

组件1： src / app / XYZ / two / more / step / C2.component.ts

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

@Component({
  selector: 'app',
  templateUrl: './C2.component.html',    
})

export class C2Component implements OnInit { 


  constructor() 


  ngOnInit() {    
  }

  submit()
  {
    // after submit update the C1.component.ts variable 'x1' here
  }
}

提前致谢！

Answer 1

您真的应该为这样的任务使用共享服务，因为您可以从注入它的每个组件访问和修改它的属性。并且它确保角度变化检测正确地发生变化。

但如果您不想使用它（请考虑使用它！），您可以选择组件类的静态属性：

export class C2Component {
  public static shared: string = 'foo';
}

import { C2Component } from '...';
// ...

export class C1Component {
  submit() {
    C2Component.shared = 'bar';
  }
}

但这可能会导致一些关于变化检测的问题。

或者您可以使用位于window对象上的全局变量，但这更糟糕。所以请不要。

如何在不使用Angular 4中的服务类的情况下访问或更新其他组件的变量

1 个答案: