Question

我有一个简单的组件应该控制我的数据表上的显示类。我可以让它工作的唯一方法是在实际组件内部加载数据表。这些按钮不适用于其他组件中的数据表。我正在导入类并输入指令，但它仍然不会在它自己的嵌套范围之外工作。

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

它无效，因为其他组件无法看到isOpen和isSplit属性。

基本上您只需要访问其他组件中的isOpen和isSplit。

最简单的方法是创建共享服务，然后将isOpen和isSplit作为该服务的属性。在任何需要的地方导入服务并访问属性。

如果只有父组件需要访问权限，还有其他选项。您可以使用ViewChild装饰器。您还可以创建父级可以侦听的事件，然后使用该事件设置自己的isOpen和isSplit属性。

Answer 2

我不知道这是否是实现您所寻求目标的最佳途径，但可以使用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)?更好地了解服务。

对不起我的英语，我希望它可以帮助你

angular 2（click）=不在其组件之外的选择器上工作

2 个答案: