Угловой 2 (щелчок) = не работает на селекторах вне его компонента

Question

У меня есть простой компонент, который должен управлять классами отображения на моих datatables. Единственный способ, с помощью которого я могу заставить его работать, - это иметь загрузочную нагрузку внутри реального компонента. Кнопки не работают с данными в других компонентах. Я импортирую класс и помещаю в директиву, но он по-прежнему не работает вне его собственной вложенной области.

import {Component} from 'angular2/core'; 
import {NgClass} from 'angular2/common'; 
import {DataTable} from '../../components/datatable/datatable'; 
import {TestDatatable} from "../../views/grids/testDatatable"; 
@Component({ 
    selector: 'show-parent', 
    inputs: ['isDisabled'], 
    directives: [NgClass, TestDatatable], 
    template: ` 
     <i class="fa fa-sitemap" (click)="toggleOpen($event)"></i> 
     <i class="fa fa-th-large" (click)="toggleSplitScreen($event)"></i> 


//The buttons work on this datatable below but if I move 
// this selector somewhere else it no longer works 

     <myDatatable [ngClass]="{'panel-open': isOpen, 'panel-split': 
     isSplit}" class="parent-grid"></myDatable> 
    ` 
}) 
export class ShowParent { 
    isOpen = false; 
    isSplit = false; 

    toggleOpen(event) { 
     event.preventDefault(); 
     this.isOpen = !this.isOpen; 
    } 

    toggleSplitScreen(event) { 
     event.preventDefault(); 
     this.isSplit = !this.isSplit; 
    } 
} 

Answer 1

Я не знаю, будет ли это лучший способ добиться того, что вы ищете, но может использовать DI для этого, вы можете прочитать больше here

import {SharedSer} from 'yourPath/sharedSer'; 
..// 

bootstrap(AppComponent, [SharedSer]); 

если добавить [SharedSer] в начальной загрузки, вы будете иметь в своем распоряжении тот же экземпляр для всего приложения, нет необходимости использовать providers: [SharedSer]

---

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class SharedSer { 

    //In this class, you can implements for example: 
    // get and set keyword, you'll access it like a property. or 
    // get and set method/function. 

    isOpen: boolean = false; 
    isSplit: boolean = false; 

    constructor() { 

    } 
} 

---

import {SharedSer} from 'yourPath/sharedSer'; 
..// 

export class ShowParent { 

    constructor(private service: SharedSer) { 

    } 

    toggleOpen(event) { 
     event.preventDefault(); 
     this.service.isOpen = !this.isOpen; 
    } 

    toggleSplitScreen(event) { 
     event.preventDefault(); 
     this.service.isSplit = !this.service.isSplit; 
    } 
} 

---

import {SharedSer} from 'yourPath/sharedSer'; 
..// 

export class YourDatatable { 

    constructor(private service: SharedSer) { 

    }   
} 

---

Может быть, это поможет вам What's the best way to inject one service into another in angular 2 (Beta)? лучше понять услуги.

извините за мой английский, и я надеюсь, это вам поможет

Answer 2

Это не работает, потому что другие компоненты не могут видеть isOpen и isSplit свойства.

В основном вам просто нужно получить доступ к isOpen и isSplit в другом компоненте.

Самый простой способ - создать общую услугу, а затем присвоить isOpen и isSplit свойствам этой услуги. Импортируйте службу там, где она вам нужна, и получите доступ к свойствам.

Существуют и другие варианты, если требуется только родительский компонент. Вы можете использовать декоратор ViewChild. Вы также можете создать событие, которое родитель может прослушать, а затем использовать его, чтобы установить его собственные свойства isOpen и isSplit.