Angular 2-调用其他组件函数

Question

我试图从一个组件调用另一个组件函数。 这是我的构造函数：

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

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

但是，当我尝试从我的appComponent获得属性/功能时，出现一条错误消息： appComponent is undefined

为什么即使我在一开始就对其进行初始化，但我的组件仍未定义？

Answer 1

您可以将@Output用于其他组件事件绑定。

不要使用@ Input和@ Output代替@Directive和@Component装饰器的input和output属性

有关更多信息，您可以访问以下URl： https ://www.sitepoint.com/angular-2-components-inputs-outputs/

Answer 2

假设非应用程序组件是应用程序组件的子组件，则可以将数据从应用程序组件向下传递到子组件。 在这里，我们的应用程序组件包含environmentUrl逻辑。 然后将其保存为environmentUrl。 然后将其传递给my-child组件的url属性。 因此，不需要子组件访问父组件的功能，相反，我们可以将数据从父组件向下流到子组件。

@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() {
  }
}

这种方法的另一个优点是ChildComponent更可重用。 ChildComponent对父级方法一无所知，可以在不显式依赖父级组件的情况下使用。