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 用于其他组件事件绑定。

使用@ 输入和@ 输出代替@Directive和@Component装饰器的输入和输出属性

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

Answer 2

假设非app组件是app组件的子组件，您只需将数据从app组件向下传递到子组件即可。这里我们有app组件包含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对父方法没有任何了解，可以在没有明确依赖父组件的情况下使用。

Angular 2 - 调用其他组件功能

2 个答案: