如何从子组件访问父组件值而不通过输入传递它？

Question

我正在制作电子邮件模式，但实际提出请求时遇到问题http.post。问题是post()在子组件中执行，这意味着this.postUrl函数实际运行时未定义。如何确保子组件可以访问this.postUrl而不将其作为输入传递给它？我不想通过输入传递它的原因是子组件也在其他地方使用，使得它过于postUrl具体而无法用作输入，因为它只会在这种情况下使用。

@Component({
  selector: 'modal-email',
  templateUrl: './app/assets/scripts/modules/modal/templates/modal-email/modal-email.component.html',
  styleUrls: ['./app/assets/scripts/modules/modal/templates/modal-email/modal-email.component.css'],
  inputs: [
    'model',
    'postUrl',
    'header',
    'text'
  ],
  directives: [FormInputWithButtonComponent],
  providers: [Http, HTTP_PROVIDERS]
})

export class ModalEmailComponent {

  constructor(private _http: Http) {

  }

  post() {

    // this.postUrl becomes undefined, this.model is defined since it also lives in the child component
    console.log(this.postUrl, this.model);

    this._http.post(this.postUrl, {email: this.model})
      .map(res => res.json())
      .subscribe(
        data => this.data = data,
        err => console.log(err)
      )
  }
}

ModalEmailComponent像这样使用：

<modal-email postUrl="localhost:3000/email"></modal-email>

modal-email在谎言组件内部form-input-with-button>：

<form-input-with-button [(model)]="email" type="email" [onSubmit]="post"></form-input-with-button>

子组件：

@Component({
  selector: 'form-input-with-button',
  templateUrl: './app/assets/scripts/modules/form-controls/form-input-with-button/form-input-with-button.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-input-with-button/form-input-with-button.component.css'],
  inputs: [
    'model',
    'onSubmit' // onSubmit is what calls the post function from ModalEmailComponent
  ],
  host: {
    '(input)': 'modelChange.emit($event.target.value)'
  }
})

export class FormInputWithButtonComponent {
  @Input() model: string;
  @Output() modelChange: EventEmitter = new EventEmitter();
}

FormInputWithButtonComponent模板：

<input [(ngModel)]="model" class="form-input-with-button">
<button (click)="onSubmit()" class="form-input-button">Submit</button>

编辑：你可以扩展组件吗？就像是：

export class FormInputWithButtonComponent extends ModalEmailComponent

当我尝试时，它说这Cannot read property prototype of undefined让我认为这是不可能的。

Answer 1

实际上，您可以从子组件注入父组件属性、值，而无需使用任何服务或输入。

首先，您需要Injector从子组件中的构造函数注入：

    export class ChildComponent implements OnInit {

        constructor(public injector:Injector) {
        }

        ngOnInit() {
            let parentComponent = this.injector.get(ParentComponent);
            this.postUrl = parentComponent.
        }
    }

进口

import {Injector} from "angular2/core";
import {OnInit} from "angular2/core";