Question

这是我的情况：

我有一个组件：

@Component({
  selector: 'home',
  templateUrl: './administration.html',

  directives: [Directivetest]
})
export class Administration {
  Hello : string;

  constructor(private http: Http) {
  }

  ngOnInit() {
    //init stuff here
  }

  callMe(value) {
    alert("call you" + this.Hello );
  }
}

和我的模板：

<h3>Test Administration </h3>

<directivetest></directivetest>

这是我的指示：

@Component({
  selector: 'directivetest',
  templateUrl: './directivetest.html'
})
export class DirectiveTest{

  klickme() {
    //CALL A  Administration  Function (callMe(value)) or change the value????????????
  }
}

有没有办法改变变量或从我的“指令”组件中调用函数，

Answer 1

你应该做的是：

首先制作服务（就像没有任何选择器的组件一样）
将所有数据和相关方法放入该服务中。
在两个组件中注入此服务。

Answer 2

如果您只想更改一个值并且在父元素模板中使用该指令，则只需使用绑定或中介服务将指令紧密地耦合到父组件。

如果您确实需要直接访问父组件，请参阅此答案https://stackoverflow.com/a/31796289/217408

@Directive({
  selector : '[layout-item]'
})
export class MyDirective {
  constructor(private _element: ElementRef, private _viewManager: AppViewManager) {
    let hostComponent = this._viewManager.getComponent(this._element);
    // on hostComponent we have our component! (my-component, my-second-component, my-third-component, ... and so on!
  }

}

Answer 3

正如其他人所说，你可以使用指令或服务来做某事。

我在这里向您展示与您的代码无关的指令方式。

通过GünterZöchbauer帮助，我可以完成此问题Look here。 这是一个从angular2指令开始的非常简单的示例。

我有一个组件和指令。

我使用指令来更新组件的视图。此外，使用组件的changeColor函数调用指令的changeColor函数。

<强> 组件

if params.has_key? "security-update"
  #do something
elsif params.has_key? "basic-update"
  #do another thing
end

<强> 指令

@Component({
  selector: 'my-app',
  host: {'[style.backgroundColor]':'color',}
  template: `
      <input type="text" [(ngModel)]="color" (blur)="changeColor(color)" />
      <br>
      <span > (span) I'm {{color}} color <span>
      <div mySelectedColor [selectedColor]="color"> (div) I'm {{color}} color </div>
    `,
    directives: [selectedColorDirective]
})


export class AppComponent implements AfterViewInit{
  @ViewChild(selectedColorDirective) myDirective: selectedColorDirective;
  color:string;
  constructor(el:ElementRef,renderer:Renderer) {
    this.color="Yellow";
    //renderer.setElementStyle(el, 'backgroundColor', this.color);
  }
  changeColor(color)
  {
    this.myDirective.changeColor(this.color);
  }
  ngAfterViewInit() {

  }
 }

更改来自其他组件的组件的变量或调用功能

3 个答案: