Angular 2-调用其他组件函数

Question

i'm trying to call another component function from a component. This is my constructor :

    constructor(
        private http: Http,
        private appComponent: AppComponent
        ) {
        this.setUrl();
    }

    setUrl() {
        if (this.appComponent) {
            this.Url = this.appComponent.getEnvironnement();
        } else {
            setInterval(this.setUrl, 1000);
        }
    }

However, when I'm trying to property/function from my appComponent, I get an error saying : appComponent is undefined

Why my component is undefined, even if I initialize it on the beginning ?

Answer 1

You can use the @Output for other component event binding.

Do use @ Input and @ Output instead of the inputs and outputs properties of the @Directive and @Component decorators

For more information you can visit following URl: https://www.sitepoint.com/angular-2-components-inputs-outputs/

Answer 2

Assuming that the non-app component is a child of the app component you could just flow data from the app component down to the child component. Here we have the app component contain the environmentUrl logic. This is then saved to as environmentUrl. This is then passed down to the my-child component's url property. Therefore no need to have the child component access the parent component's function, instead we can just flow the data down from the parent to the child.

@Component({
  selector: 'my-app',
  template: `
    <my-child [url]="environmentUrl"></my-child>
  `
})
export class App {
  environmentUrl: string;

  constructor() {
    this.environmentUrl = getEnvironment();
  }

  getEnvironment() {
    return '/some/url';
  }
}

@Component({
  selector: 'my-child',
  template: `
    <div>
      <h2>{{url}}</h2>
    </div>
  `,
})
export class ChildComponent {

  @Input() url: string;

  constructor() {
  }
}

Another advantage of this approach is that the ChildComponent is more reusable. The ChildComponent doesn't know anything about the parent's method and can be used without explicitedly relying on the parent component.