从另一个组件更改一个组件的变量或调用函数答案

【问题标题】：Change variable or call funtion from a component from an other component从另一个组件更改一个组件的变量或调用函数
【发布时间】：2016-01-21 09:29:26
【问题描述】：

这是我的情况：

我有一个组件：

@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????????????
  }
}

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

【问题讨论】：

标签： javascript typescript angular

【解决方案1】：

你应该做的是：

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

【讨论】：

我想我误解了逻辑谢谢你告诉我正确的方法！
是的......这种方式只有我们以前在角度1的控制器之间进行通信。
这意味着我可以随时将所有大数据从服务器获取到我的服务中，并从我的组件中获取我的 Angular 服务中的任何内容？
是的。这也是有道理的，因为在 Java 中我们使用 dao 模式进行数据相关的操作。

【解决方案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!
  }

}

【讨论】：

【解决方案3】：

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

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

在 Günter Zöchbauer 的帮助下，我可以解决这个问题 Look here 。 这是一个从 angular2 指令开始的非常简单的示例。

我有一个组件和指令。

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

组件

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

  }
 }

指令

@Directive({

  selector:"[mySelectedColor]", 
    host: {
   // '(keyup)': 'changeColor()',
   // '[style.color]': 'selectedColor',
  }

  })

  export class selectedColorDirective { 

    @Input() selectedColor: string = ''; 

    constructor(el: ElementRef, renderer: Renderer) {
      this.el=el;
        this.el.nativeElement.style.backgroundColor = 'pink'; 
      // renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
    } 

    changeColor(clr)
    {
     console.log('changeColor called ' + clr);
     //console.log(this.el.nativeElement);
     this.el.nativeElement.style.backgroundColor = clr;
     }

 }

【讨论】：