变化而变化或从一个组件从其他组件

我有一个组件：

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

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

来源

2016-01-21 user3369579

你应该做的是：

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

来源

2016-01-21 09:42:11 binariedMe

我想我误解了逻辑感谢您对我正道！ – user3369579

是啊......这种方式只用于角度1中的控制器之间的通信。 – binariedMe

这意味着我可以随时将来自服务器的所有大数据导入到我的服务中，并从我的组件中获取我的Angular服务中的任何内容？ – user3369579

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

如果你真的需要直接访问父组件看到这个答案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! 
    } 

}

来源

2016-01-21 09:50:21

至于对方说，你可以使用指令或服务做一些事情。

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

通过冈特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; 
    } 

}

来源

2016-01-21 10:00:52 micronyks

变化而变化或从一个组件从其他组件

回答

相关问题