Angular 2 Zugriff Kind Komponente Funktion innerhalb UI-VIEW

Question

Mein Projekt hat beide Winkel 1,5 und Winkel 2. Ich habe unter Struktur, wo ich 2 Geschwister-Komponente First-Komponente und zweite Komponente haben. Die erste Komponente hat den Toggle-Button und die zweite Komponente hat UI-View von angular 1.5, wo die Child-Komponente gerendert wird.

Ich möchte auf Kind-Komponente ToggleData() zugreifen, wenn Sie auf Schaltfläche in der ersten Komponente klicken.

Ich versuchte mit View-Kind, aber es gibt Fehler als ToggleData() nicht gefunden.

Bitte helfen Sie mir, dieses Problem zu lösen.

//ChildComponent 
 

 
ToggleData(){ 
 
}

<First-component> 
 

 
<button>Toggle</button> 
 

 
</First-component> 
 

 
<Second-component> 
 

 
    <div ui-view> 
 
    
 
    <child-component></child-component> 
 
    
 
    </div> 
 

 
</Second-component>

Answer 1

Edit: Da es in einer Route:

Shared Service:

@Injectable() 

export class SharedService{ 
    showData:boolean=false;  

    ToggleData(){ 
     //do something 
     this.showData = !this.showData; 
    } 

} 



export class Parent{ 

    constructor(public shared:SharedService){ 
    } 


} 

export class Child{ 
     //child can now access all shared data/functions 
     // for example this.shared.showData 
     constructor(public shared:SharedService){ 
    } 
} 

Eltern html:

<button (click)="shared.ToggleData()">Toggle</button> 

Hoffnung diese

Ein Weg helfen könnte ist aus der Vorlage:

//ChildComponent 
 

 
ToggleData(){  
 
}

<First-component> 
 

 
<button (click)="child.ToggleData()">Toggle</button> 
 

 
</First-component> 
 

 
<Second-component> 
 

 
    <div ui-view> 
 
    
 
    <child-component #child></child-component> 
 
    
 
    </div> 
 

 
</Second-component>

Andere Art und Weise von der Komponente unter Verwendung von Kinder ist und rufen Sie dann

@ViewChild(ChildComponent) child; 

toggle(){ 
    this.child.ToggleData(); 
}