變化而變化或從一個組件從其他組件

我有一個組件：

@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

變化而變化或從一個組件從其他組件

回答

相關問題